本文详细介绍了ElementUI中validate函数的作用，如何在表单提交时自定义校验规则，以及如何正确设置rules和v-model以实现有效验证。还提到创建validation.js文件管理常用校验方法的实践技巧。
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”
/>
扫一扫
2010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
