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

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

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

:model = 'FormData'(数据源)

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

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

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

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

在el-input里添加:

v-model="form.name"

如图所示:

Element-ui 自定义校验规则随笔_第1张图片

2.验证数据分两种:

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

Element-ui 自定义校验规则随笔_第2张图片

 最后提交数据的时候,手动兜底验证:

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

2.2 自定义效验规则:

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

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

Element-ui 自定义校验规则随笔_第3张图片

 Element-ui 自定义校验规则随笔_第4张图片

 *注意事项:

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

你可能感兴趣的:(Element-ui,ui,elementui,vue)