element-ui自定义表单校验规则及常用表单校验(1)

validate是ElementUI封装用于对整个表单进行验证的，参数是一个回调函数。该回调函数在校验结束后被调用，是否校验成功和未通过校验的字段。这个回调函数的原型为：function fun(rule, value, callback, source, options){}，其中rule指向当前的规则对象，value是需要进行校验的值，callback是验证之后的执行回调，source是跟value的值一致的键值对象（可以忽略），options是个额外的配置选项（可选）。所以常见的函数定义如下，校验手机号码是否正确。

validate校验

自定义校验方法是一个在校验结束后才会被调用回调函数，所以在提交表单的时候我们需要通过$refs来调用validate来继续自定义校验。自定义校验规则时必须保证每个分支都调用了callback方法，否则会导致el-form组件在使用validate方法时无法进入回调函数。调用validate()校验时需要prop属性绑定校验的字段名，否则无法校验v-model中绑定的值。

常用校验规则

为了方便我们还是定义一个validation.js文件来专门定义常用的校验方法，然后导入validation.js进而使用。这里注意自定义rules时外层的message高于callback中的错误提示，所以自定义规则时建议外层勿定义message，可以用两个规则来校验内容。定义好之后在需要用到的地方直接 import 引入，然后在 rules 校验中加入即可。

附上本文用到的源码

<el-form

:model=“loginForm”

autocomplete=“on”

class=“login-form”

:rules=“rules”

<el-input

placeholder=“请输入用户名”

name=“username”

type=“text”

v-model=“loginForm.username”

autocomplete=“on”

/>