Vue의 요소 양식 유효성 검사의 기본 요소

이 글은 주로 Vue의 Element 양식 검증에 대한 기본 요소를 소개합니다. 이제 이를 공유합니다. 도움이 필요한 친구들은 이를 참고할 수 있습니다.

Element는 주로 양식 검증으로 async-validator 라이브러리를 사용합니다.

async-validator는 크게 세 부분으로 나뉩니다

• async-validator主要分成三部分

  • Validate

  • Options

  • Rules

  其中，对于我们使用Element的来说，Rules最重要，也是这部分内容较多的。

  async-validator各部分

  async-validator基本使用

  import Validator from 'async-validator'
  
  // 规则的描述
  const rules = {
    name: { type: 'string', required: true }
  }
  
  // 根据规则生成验证器
  const validator = new Validator(rules)
  
  // 要验证的数据源
  const source = {
    name: 'LanTuoXie'
  }
  
  // 验证后的回调函数
  function callback (errors, fileds) {
    if (errors) {
      // 验证不通过，errors是一个数组，记录那些不通过的错误信息
      // fileds是所有数据源的字段名，也即上面的source的'name'
      // 验证是根据字段名来的，rules.name 对应 source.name。 字段名要一样才会验证
    }
    // 下面是验证通过的逻辑
  }
  
  // 验证数据源是否符合规则
  validator.validate(source, callback)

  Validate

  就是上面例子中的validator.validate，是一个函数

  function(source, [options], callback)

  source和callback对应上面的例子。

  Options

  Options有两个值

  • first: 一个布尔值，如果出现字段不通过，终止验证后面的字段

  • firstFields: 布尔值或者字符串，如果验证一个字段时，一个规则不通过，终止验证下个规则(一个字段，多个规则的情况)

  firstFields是针对单个字段多规则的情况下使用，而first是针对所有字段

  Rules

  最重要的还是Rules。定义rule可以有三种形式，但是rules字段名一定要和数据源source的字段名一致。

  • 函数的方式：{ name(rule, value, callback, source, options) {} }

  • 对象的方式： { name: { type: 'string', required: true } }

  • 数组的方式： { name: [{ type: 'string' }, { required: true }] }

  上面可以看到，字段名name可以有3种方式定义规则，在使用Element的时候还是推荐对象和数组的方式，这个两个比较简单，函数看情况使用。

  除了type和required还有哪些用法可以用以及有什么用？

  Rules的默认规则

  • type: 要被验证的数据的类型如url和number等

  • required： 是否必填

  • pattern：使用正则来验证

  • min: 数据的长度的最小值 (数据类型必须是string或array)

  • max: 数据的长度的最大值 (数据类型必须是string或array)

  • len: 数据的长度必须等于这个值 (数据类型必须是string或array)

  • enum: 数据的值必须等于这个枚举数组某个元素 { enum: [1, 2, 3] }

  • transform: 一个钩子函数，在开始验证之前可以对数据先处理后验证，如吧number转为string后再验证

  • message: 报错的提示信息可以是字符串也可以是jsx标签45a2772a6b6107b401db3c9b82c049c2Name is required54bdf357c58b8a65c66d7c19c8e4d114

  • validator: 自定义验证函数以及报错信息 validator(rule, value, callback)

  • 还有一个Deep Rules是处理object或者array类型的，使用了fields 或defaultField

  • fields：Deep Rules的时候使用，定义下一层的字段名以及规则

  • defaultField: Deep Rules的时候使用，所有下一层的字段都会采用该规则，可以被fields替换

  默认的Type

  • string：必须是String类型，规则不设置type默认是这个

  • number：必须是Number类型，如果后台返回的数据是字符串，可以用transform转为Number类型，字符串类型的数字（'12'）不会通过，要注意

  • boolean: 必须是Boolean类型

  • method: 必须是Function

  • regexp：必须是正则RegExp

  • integer：是Number类型的正整数

  • float: 是Number类型的浮点数

  • array: 是Array.isArray通过的数组

  • object: Array.isArray不通过的Object类型

  • enum: 要先定义enum，然后值必须是enum某个值

  • date: 必须是Date对象的实例

  • url: String类型且符合链接格式

  • hex

  • emailValidate

  • 🎜Options🎜
  • 🎜Rules🎜
  🎜그 중에서도 Element를 사용하는 우리들에게 Rules는 가장 중요하고, 가장 많은 컨텐츠를 담고 있는 부분이기도 합니다. 🎜

  비동기 유효성 검사기의 일부

  🎜비동기 유효성 검사기의 기본 사용🎜

  cosnt urls = ['http://www.baidu.com', 'http://www.baidu.com']
  // 一个urls的数组，
  const rules = {
    urls: {
      type: 'array',
      required: true,
      defaultField: { type: 'url' }
    }
  }

  🎜유효성 검사🎜🎜는 위 예에서 validator.validate입니다. 🎜

  const ids = {
    name: 'LanTuoXie',
    age: 12,
    spc: '帅'
  }
  
  const rules = {
    ids: {
      type: 'object',
      required: true,
      fields: {
        name: { type: 'string', required: true },
        age: { type: 'number', required: true, tranform: Number },
        spc: { type: 'string', required: true }
      }
    }
  }

  🎜source 및 콜백 함수는 위의 예에 해당합니다. 🎜🎜옵션🎜🎜옵션에는 두 개의 값이 있습니다. ​​🎜
  • 🎜first: 필드가 부울 값인 경우 통과하지 못하면 다음 필드 확인을 중지합니다.🎜
  • 🎜firstFields: 부울 값 또는 문자열, 필드 확인 시 규칙이 통과하지 않으면 확인을 중지합니다. next 규칙(하나의 필드, 여러 규칙)🎜
  🎜firstFields은 단일 필드에 여러 규칙이 적용될 때 사용되는 반면, first는 사용됩니다 모든 분야에 🎜🎜규칙🎜🎜가장 중요한 것은 규칙입니다. 규칙은 세 가지 형식으로 정의할 수 있지만 규칙 필드 이름은 데이터 소스의 필드 이름과 일치해야 합니다. 🎜
  • 🎜함수 메서드: { name(rule, value, callback, source, options) {} }🎜
  🎜객체 메서드: { 이름: { 유형: '문자열', 필수: true } }🎜
• 🎜Array 메서드: { 이름: [{ 유형: ' string' }, { 필수: true }] }🎜

🎜 위에서 볼 수 있듯이 필드 이름 name은 Element를 사용할 때 여전히 3가지 방법으로 정의할 수 있습니다. 객체 방식과 배열 방식을 권장하는데, 이 두 가지는 상대적으로 간단하며, 상황에 따라 함수를 사용해야 합니다. 🎜🎜 type 및 required 외에 어떤 다른 사용법을 사용할 수 있으며 그 용도는 무엇입니까? 🎜

규칙의 기본 규칙

• 🎜type: 확인할 데이터 유형은 와 같습니다. url 및 <code>번호 등🎜
• 🎜필수: 필수인가요?🎜
• 🎜pattern: 정규식을 사용하여 확인 🎜
• 🎜min: 데이터 길이의 최소값(데이터 유형은 string 또는 <code>array)🎜
• 🎜max: 데이터의 최대 길이(데이터 유형은 string이어야 함) 또는 배열) 🎜
• 🎜len: 데이터의 길이는 이 값과 같아야 합니다(데이터 유형은 string 또는 <code>배열)🎜
• 🎜enum: 데이터 값은 이 열거형 배열 의 특정 요소와 동일해야 합니다. { enum: [1, 2, 3] }🎜
• 🎜transform: number를 string으로 만든 다음 다시 확인하세요🎜
• 🎜message: 오류 메시지는 문자열 또는 jsx 태그일 수 있습니다. <span>이름이 필요합니다</span> code>🎜
• 🎜validator: 사용자 정의 확인 기능 및 오류 메시지 validator(rule, value, callback) 🎜
• 🎜필드를 사용하여 객체 또는 배열 유형을 처리하는 심층 규칙도 있습니다. defaultField🎜 li>
• 🎜필드: 심층 규칙을 사용하여 다음 레이어의 필드 이름과 규칙을 정의할 때 사용됩니다🎜
• 🎜defaultField: 심층 규칙 사용하면 다음 수준의 모든 필드가 이 규칙을 채택하고 필드🎜

로 대체될 수 있습니다. 기본 유형

• 🎜string: 문자열 유형이어야 합니다. 규칙에서 유형을 설정하지 않은 경우 기본값은 다음과 같습니다. 🎜
• 🎜number: 숫자 유형이어야 합니다. 배경에서 반환된 데이터가 문자열인 경우 transform을 사용하여 변환할 수 있습니다. 문자열 유형의 숫자('12')는 통과되지 않습니다. 주의하세요🎜
• 🎜boolean: 반드시 Boolean 유형이어야 합니다🎜
• 🎜메서드: 함수여야 합니다🎜
• 🎜 정규 표현식: 일반 RegExp여야 합니다🎜
• 🎜정수: 숫자형의 양의 정수🎜
• 🎜float: 숫자형의 부동 소수점 숫자🎜
• 🎜array: Array.isArray가 전달한 배열입니다🎜
• 🎜object : Array.isArray가 전달하지 않는 객체 유형🎜
• 🎜enum: 먼저 enum을 정의한 다음 값은 enum🎜의 특정 값이어야 합니다.
• 🎜date: 이어야 합니다. Date 객체의 인스턴스🎜
• 🎜url: 문자열 유형이며 링크 형식을 준수합니다🎜
• 🎜 hex🎜 li>
• 🎜email: 문자열 유형이며 이메일 형식을 따릅니다🎜

Deep Rules使用demo

cosnt urls = ['http://www.baidu.com', 'http://www.baidu.com']
// 一个urls的数组，
const rules = {
  urls: {
    type: 'array',
    required: true,
    defaultField: { type: 'url' }
  }
}

const ids = {
  name: 'LanTuoXie',
  age: 12,
  spc: '帅'
}

const rules = {
  ids: {
    type: 'object',
    required: true,
    fields: {
      name: { type: 'string', required: true },
      age: { type: 'number', required: true, tranform: Number },
      spc: { type: 'string', required: true }
    }
  }
}

自定义验证validator

validator(rule, value, callback)

• rule: 记录了验证字段的字段名以及规则的信息

• value: 要验证的值

• callback: 如果callback()代表验证通过，如果callback(new Error('错误要提示的信息'))代表验证不通过

// 验证是[min, max]范围内的正整数
const betweenInt = (min, max) => (rule, v, cb) => {
  const isBetween = v >= min && v <= max
  const isInt = /^[0-9]+$/.test(v)
  if (isBetween && isInt) return cb()

  return cb(new Error(`要求是在${min}到${max}的正整数 [${min}, ${max}]`))
}

const rules = {
  num: { validator: betweenInt(1, 5), required: true }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！ 

 相关推荐：

vue项目中如何实现保存头像以及base64字符串转图片的功能

Vue中for in对象时如何解决属性为非负整数的问题

위 내용은 Vue의 요소 양식 유효성 검사의 기본 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!