AsyncValidator 验证框架!

基本代码结构

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

一、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>

复制代码

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

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

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

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

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

二、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 里面相对简单一点

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

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

验证规则配置详解

一、Validate

function(source, [options], callback)

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

二、Rules

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

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

三、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.

四、Required

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

五、Pattern

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

六、Range

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

七、Length

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

八、Enumerable

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

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

复制代码