【ElementUI】自定义表单规则

在使用ElementUI组件时,有时候需要自定义表单校验,然后回自定义校验规则。

• 自定义校验规则中不能直接写return，比如if(!value)return;必须返回一个回调函数callback()（返回callback的入参为空代表校验通过规则，返回含new Error（‘自定义提示’）入参代表校验不通过规则。）
• 必须保证自定义校验规则的每个分支都调用了callback方法，否则会导致el-form组件的validate方法无法进入回调函数。
• 并且自定义规则必须卸载data(){}开始位置

　　重点来了，特别注意自定义规则这个方法的内容！！！！

<el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>

//自定义校验规则!!!
var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
         if (value < 18) {
            callback(new Error('必须年满18岁'));
            //注意，如果这里把else分支去掉，也就是没有callback()回调，会发现，保存不成功！  
        } else {
            callback();
        }
      };
//提交表单，进行保存校验
saveAndSubmit: function() {
    let loading = this.$loading()
    console.log("进入校验前")
    this.$refs['model'].validate((valid) => {
    console.log("准备校验")
    if (valid)
    .......省略代码

第一坑：

比如if(!value) return callback(new Error('年龄不能为空'));

一定要写callback,如果你想写成if(!value) { alert("年龄不能为空"); return ; }这种方式是不行的！
第二坑：

自定义校验方法每个分支必须要调用callback方法，不然会导致el-form组件的validate方法无法进入回调函数！！

比如将下面的else去掉，会发现在提交表单的时候，不会进入回调函数，也就是下面的console.log("准备校验")不会输出！！！

if (value < 18) {
callback(new Error('必须年满18岁'));
//注意，如果这里把else分支去掉，也就是没有callback()回调，会发现，保存不成功！  
} else {
callback();
}

saveAndSubmit: function() {
    let loading = this.$loading()
    console.log("进入校验前")
    this.$refs['model'].validate((valid) => {
    console.log("准备校验")
    if (valid)
    .......省略代码