element-ui -- 彻底搞懂element-ui里面的form校验
2020/4/24 11:51:47
本文主要是介绍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 就是数据啦,可以校验了 } }) 复制代码
-- 完 --
这篇关于element-ui -- 彻底搞懂element-ui里面的form校验的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求