AsyncValidator 验证框架!

基本代码结构

表单验证在很多提交表单的地方都会用到，算是一个使用比较频繁的技能。ElementUI 引入了 async-validator，在 ElementUI 官方文档上对一些验证配置的说明还是比较模糊的，只是给出了一个简单的例子。其实对照插件的文档编写代码，会少写很多代码，毕竟封装的还是比较好的。

1、html 代码结构

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
    <el-form-item prop="email" label="邮箱"
        :rules="[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
        ]"
    >
        <el-input v-model="dynamicValidateForm.email"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    </el-form-item>
<el-form>

复制代码

先看一个比较简单的验证规则的配置：

1、在 el-form 标签上绑定 model 属性，值为定义的表单的数据对象，再配置一个 ref 属性，和 model 属性绑定同一个表单数据对象。model 定义表单字段绑定，ref 定义表单验证的对象，二者可以一致，也可以不同。

2、在每个 el-form-item（除包裹按钮的 el-form-item）标签上设置 prop 属性，值为表单的数据对象对应的 key 值

3、为每个 el-form-item（除包裹按钮的 el-form-item）绑定验证规则 rule 属性，配置规则下节详解

4、给表单提交按钮绑定提交验证表单事件（非必要，但是在提交表单时是必须的）

2、JavaScript 代码结构

<script>
    export default {
        data() {
            return {
                dynamicValidateForm: {
                    email: ''
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
              });
          }
      }
  }
</script>
复制代码

JavaScript 里面相对简单一点

1、在 data 里面定义一个表单字段的数据对象

2、定义一个提交按钮提交的方法，在提交数据之前，实施表单验证（this.$refs[formName].validate((valid)），当验证通过（valid = true）后提交数据，验证不通过（valid = false）直接 return false 。

验证规则配置详解

1、Validate

function(source, [options], callback)

• source 配置验证规则的对象（必须）
• options 配置验证过程的参数（可选）
• callback 当验证完成后执行的回调函数（必须）

2、Rules

function(rule, value, callback, source, options)

• rule 对字段的验证规则
• value 被验证的字段值
• callback 验证完成后的回调函数，接受错误提示的数组
• source 通过验证的对象
• options 附加参数
• options.messages 消息对象，会和默认信息深层合并

3、Type

验证规则设置的类型值

• string: Must be of type string. This is the default type.
• number: Must be of type number.
• boolean: Must be of type boolean.
• method: Must be of type function.
• regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
• integer: Must be of type number and an integer.
• float: Must be of type number and a floating point number.
• array: Must be an array as determined by Array.isArray.
• object: Must be of type object and not Array.isArray.
• enum: Value must exist in the enum.
• date: Value must be valid as determined by Date
• url: Must be of type url.
• hex: Must be of type hex.
• email: Must be of type email.

4、Required

被验证的字段，值必须存在

5、Pattern

被验证的字段值，通过验证匹配的正则表达式

6、Range

字段值的范围指定，当验证的字段值是字符串或者数组时，验证的是长度。如果是 number 类型时，值必须大于等于 min 值， 小于等于 max 值。

7、Length

当验证的字段值是字符串或者数组时， 指定验证的就是 length 属性值，如果是 number 类型时，验证数值长度。

8、Enumerable

根据给出的列表值来验证字段的值

var descriptor = {
    role: {type: "enum", enum: ['admin', 'user', 'guest']}
}

复制代码