element UI表单检验那些事

一个小白在使用form表单的时候遇到的问题，在此做个小结

先贴上代码

(不重要的已忽略)

<el-form :model="form" :rules="formRules" ref='ruleForm' :label-width="formLabelWidth" size="mini">
    <el-form-item label="姓名:" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="性别:" prop="gender">
      <el-select v-model="form.gender" placeholder="请选择">
        <el-option v-for="(item,index) in genders" :key="index" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="手机号:" prop="mobile">
      <el-input v-model="form.mobile"></el-input>
    </el-form-item>
    <el-form-item label="证件号:" prop="id_no">
      <el-input v-model="form.id_no"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="checkForm">校验</el-button>
    </el-form-item>
</el-form>


data(){
    return {
        form:{},
        formRules:{
            name:[{ required: true, message: '请输入姓名', trigger: 'blur' }],
            gender:[{ required: true, message: '性别不能为空', trigger: 'change' }],
            mobile:[
                { required: true, message: '请输入手机号', trigger: 'blur' },
                { pattern:/^1[3|4|5|6|7|8|9]\d{9}$/, message: '请输入正确的手机号',trigger: 'blur'}
            ],
            id_no:[
                { required: true, message: '请输入证件号', trigger: 'blur' },
                {validator(rule, value, callback) {
                    if(value.includes("\t")||value.includes(" ")){
                        callback(new Error("证件号不能有空格"))
                    }else{
                        callback()
                    }
                  },trigger: 'blur'}
            ],
        }
    }
},
methods:{
    checkForm(){
        this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //这里表示所有检验都通过，可以进行下一步操作
        } else {
          //这里即为没有通过检验，可以提示下用户
          this.$message({
              message: "请输入必填项",
              type: 'warning',
              duration: 2 * 1000
          })
        }
      });
    }
}

❗注意：给某一项指定校验规则时，prop的名称一定要与该项绑定的变量名一致，即代码中的prop="name" v-model="form.name"中的name要保持一致，不然会导致已经修改过值，但是提示一直存在

pattern是使用正则约束表单项，但是证件号没有使用正则是因为我的例子证件号不局限是身份证号所以没有使用正则，但是又不能让证件号出现空格，所以就查看了async-validator，然后就发现了whitespace transform validator

然后经过一系列baidu（就是一顿操作猛如虎，一看页面还没变），最后翻到了一个很牛的文章，然后自己捣鼓捣鼓也是大概明白了以上三个属性的用法 （属实是太菜了一下看不懂，哈哈哈）

• whitespace并不是用来判断字段中是否含有空格，而是只有当字段全是空格才会提示，所以不适用
• transform并不是可以改变用户输入的值，只是在用户输入后的字段上做些动作，比如去掉首尾空格transform(value) {return value.trim()}，但是只是在校验的时候能够通过校验，并没有发生实质的改变
• validator是可以自定义校验规则，即可以自己除了官方给定的规则自己判断是否通过，如果通过的话调用callback函数，如果失败调用callback函数时，将new Error('错误提示')作为参数，就没有必要设message

😁第一次写文，如有错误欢迎各位大佬指正