Element-ui 自定义校验规则随笔_elementui自定义校验规则

一. Element-ui 自定义校验规则

1.首先做校验要在我们的 el-form 表单中添加几个重要的属性：

:model = 'FormData'(数据源)

:rules="FormRules"(校验规则)

ref = 'FormData' (需要验证的表单元素节点)

在 el-form-item 表单里添加:

prop="name"(需要校验的字段名 )

在el-input里添加：

v-model="form.name"

如图所示：

2.验证数据分两种：

2.1 一种是简单的数据验证，一些不能为空的，必须输入的，验证规则简单的，我们就用简单的校验规则来验证，在rules中写就行：（写在data下return里）

 最后提交数据的时候，手动兜底验证：

this.$refs.deptForm.validate((valid) => {
if (valid) {
    // 这里面写提交的请求
}
})

2.2 自定义效验规则：

需要结合正则表达式，来验证的，比如邮箱，手机号码，以及其他的一些验证，如图：

data() {
  const validCode = (rule, value, callback) => {
         // rule     : 当前的规则
          // value    : 被校验的值
          // callback : 回调 
          //      如果通过了规则检验，直接调用callback()
          //      如果没有通过规则检验，调用callback(错误对象，在错误对象中说明原因)
         //      callback(new Error('错误说明'))
    }

 

 *注意事项：

自定义校验在validator里结尾一定要添加callback()，否则表单验证规则无法通过