表单验证规则rules

前提

async-validator 是一个异步验证的库，element 与 iview 的 Form 组件都是基于 async-validator 实现的数据验证，这里用iview演示代码。官方链接 https://github.com/yiminghe/async-validator

基本使用

给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段

<template>
  <div class="form-d">
    <Form ref="form" :model="formData" :rules="rules" :label-width="80">
      <FormItem label="名称" prop="name">
        <Input type="text" v-model="formData.name">
        </Input>
      </FormItem>
    </Form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      formData: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

多个校验

 rules: {
        name: [
          { type: "string", required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 6, message: '长度为2-6个字符', trigger: 'blur' },
          ...
         ]
      }

参数

• type 标志要使用的validator的数据类型
• required 必填
• message 提示内容
• trigger 触发条件 （change||blur）
• min 最小值
• max 最大值
• len 精准长度 (优先级高于min,max)
• enum 枚举中存在该值 (type必须为enum类型)
• whitespace 不能包含空白符
• pattern 正则 (必须加 required: true)

 rules: {
        name: [
          // { type: "string", required: true, message: '请输入名称' },
          // { min: 2, max: 5, message: '长度在2-5个字符' },
          // { len: 5, message: '长度必须为5字符' },
          // { type: 'enum', enum: ['bob', 'tom', 'ming'], message: '不是本班学生' },
          // { type: 'string', whitespace: true, message: '包含空白字符' },
          // { type: 'string', required: true, pattern: /^[a-zA-Z0-9]+$/, message: '名称不合法' }
        ]
      }

type的一些类型

• string: 必须为类型 string， 这是默认的 type
• number: 必须为类型 number。
• boolean: 必须为类型 boolean。
• method: 必须为类型 function。
• regexp: 必须为 RegExp的实例 或者 一个string，使用它 new RegExp时不能报错。
• integer: 必须为类型 number 并且是一个整数。
• float: 必须为类型 number 并且是一个浮点数。
• array: 必须是一个 array ，由 Array.isArray确定。
• object: 必须为类型 object 并且 Array.isArray返回false。
• enum: 值必须在 enum中存在。
• date: 值必须是有效的，由Date确定。
• url: 必须为类型 url。
• hex: 必须为类型 hex。
• email: 必须为类型 email。
• any: 可以是任意一种类型。

函数验证

  data () {
    return {
      formData: {
        name: ''
      },
      rules: {
        name: [
          { validator: this.validate, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validate (rule, value, callback) {
      if (this.formData.name) {
        if (this.formData.name === 'aaa') {
          callback(new Error('名称不可以叫aaa'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },
  }