搞懂element-ui里面的表单校验
(先给自己点一个赞b( ̄▽ ̄)d)
解析官方自定义校验的例子
基本使用看官方文档就好了,这里我把官方文档再解析下。
官方文档是这样写例子(略长,我简化下,如下)
这是view
<el-form :model="ruleForm" :rules="rules"> <el-form-item label="密码" prop="pass"> <el-input v-model="ruleForm.pass"></el-input> </el-form-item> </el-form> 复制代码
通过上面看到一个代码可以知道,那就是先用一个el-form
, 然后里面用el-form-item
el-form
需要传两个参数,model
和rules
, model
是 表单数据对象 , rules
是 表单验证规则。
el-form-item
需要传一个参数(这是最基本参数,当然还有其他),prop
用来对应rules
里面的值
规则:
model[prop]
于是官方的js代码长下面这样
js (简化后)
ruleForm: { pass: '', }, rules: { pass: [ { validator: (rule, value, callback) => { if (!value) { return callback(new Error('请输入密码')); } callback(); }, trigger: 'blur' } ], } 复制代码
这里的value就是对应上面规则的第三条
然后cb规则对应第四条
这样官方文档我们看完了。剩下底部一个更多的api。那么关于校验我们这样用就够了。
可是如果是嵌套结构,也就是view长这样
<el-form :model="form" :rules="rules"> <el-form-item v-for="(item, index) in form.list" :key="item.id" label="章节" prop="chapter"> <el-input v-model="item.name"></el-input> </el-form-item> </el-form> 复制代码
我们想要校验里面的数据怎么办呢。
总共有两种方法
第一种局限性太大,也比较麻烦,切数据重置的时候也比较麻烦,故pass。
第二种的话,就是
:prop[`list[${index}].name`] 复制代码
这样就可以校验了,但是直接设置我们发现不生效。这时候我们用到一个新的东西,rules
,这个也可以使用规则。
修改后的代码如下
// view 部分 <el-form :model="form" :rules="rules"> <el-form-item v-for="(item, index) in form.list" :key="item.id" label="章节" :rules="rules['catpter_name'][0]" :prop[`list[${index}].name`]> <el-input v-model="item.name"></el-input> </el-form-item> </el-form> // js部分 form: { list: [ {name: ''} ] }, rules: { catpter_name: [ { validator: (rule, value, callback) => { if (!value) { return callback(new Error('请输入章节名称')); } callback(); }, trigger: 'blur' } ], } 复制代码
理论上这样就可以(这个代码直接在掘金上手写了,不一定可以跑起来,但是意思达到了)
BUT, 这时候产品说,我要除了name要校验,还要最外层校验里面的name是否被校验了。下面说说场景二。
这个不好描述,我发一个图,不知道能不能描述清楚
如果没get到我的意思,那么再发一个代码
现在
这时候我们需要取巧下,既然prop
里面绑定的rules
做不到,那就用el-form-item
里面的rules
属性,在属性里面写一个函数,并把参数传过去。
这样
:rules="list_item_rule(item)" prop="list_item_prop_key" 复制代码
记得prop
不能落下,不然没效果,虽然它现在没有存在的意义了。prop里面的值,建议写_
, 然后再form也加一个_
属性。
rules:
(item) => ({ required: true, validator: (rule, _, cb) => { // item 就是数据啦,可以校验了 } }) 复制代码
-- 完 --