element-ui -- 彻底搞懂element-ui里面的form校验

搞懂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里面，这样才能算是遵守规范。
• rules和prop相对应
• prop对应rules后，rules里面的value对应model[prop]
• cb里面如果有错误就会被提取出来展示，如果是空的，那么就算是校验通过

于是官方的js代码长下面这样

js (简化后)

ruleForm: {
  pass: '',
},
rules: {
  pass: [
    { 
        validator: (rule, value, callback) => {
            if (!value) {
              return callback(new Error('请输入密码'));
            }
            callback();
        },
        trigger: 'blur'
    }
  ],
}

这里的value就是对应上面规则的第三条
然后cb规则对应第四条

这样官方文档我们看完了。剩下底部一个更多的api。那么关于校验我们这样用就够了。

高阶使用

场景1

可是如果是嵌套结构，也就是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>

我们想要校验里面的数据怎么办呢。

总共有两种方法

• 嵌套form
• prop使用点表达式

第一种局限性太大，也比较麻烦，切数据重置的时候也比较麻烦，故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 就是数据啦，可以校验了
    }
})

-- 完 --