vue 中表单自定义校验规则
2021/10/26 23:43:34
本文主要是介绍vue 中表单自定义校验规则,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1.给表单元素绑定:rules和:model
2.定义简单校验规则
在data里面定义rules属性
3,给每一个需要验证的表单项绑定简单校验规则 prop(prop 千万不要写在el-input中)
4.由于简单的校验规则不满足实际需求,所以需要自定义校验规则
//自定义校验 标识名称 const validName = (rule, value, callback) => { // 添加时的校验: 名字不能取子元素的名字 let existNameList = this.originList.filter(item => item.pid === this.addData.pid) //isEdit 是区分添加或编辑的状态 false表示是添加状态,true表示编辑状态 if (this.isEdit) { // 编辑时的校验: 名字不能取兄弟(排除自己)的名字 existNameList = this.originList.filter(item => item.pid === this.addData.pid && item.id !== this.addData.id) } // 三元表达式 existNameList.map(it => it.name).includes(value) ? callback(new Error(value + '已经占用')) : callback() } //自定义校验 权限标识 const validCode = (rule, value, callback) => { // 添加时的校验:code不能重复 originList 是校验所需要的数据 let existCodeList = this.originList if (this.isEdit) { // 编辑时的校验: code能取自己 existCodeList = this.originList.filter(item => item.id !== this.addData.id) } existCodeList.map(it => it.code).includes(value) ? callback(new Error(value + '已经占用')) : callback() }
5.把自定义校验规则名添加到rules里面
这篇关于vue 中表单自定义校验规则的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist