详解element-ui中form验证杂记


Posted in Javascript onMarch 04, 2019

最近接触的商户后台项目居多,自然而然就涉及到了大量的表单验证,

也就对一些常用的el-form表单验证和问题进行下梳理。

当我们添加required验证后,输入一些数据后再删除完时,会出现xxx is required,如下图所示

详解element-ui中form验证杂记

你可能很纳闷,已经为form表单传入了rules了啊,在不全部删除时,验证规则都没问题。这个问题是因为在html中使用了required字段,而在rules的规则没有设置required为true,

// html
<el-form-item label="角色名称" required prop="roleName">
 <el-input v-model="params.roleName"></el-input>  
</el-form-item>

// js
{ trigger: 'blur', message: '角色名称为必填项' }

这种情况下就会为输入框添加一条默认验证规则,就导致了上面图片情况的发生。

为了解决这种情况,我们只需要把卸载html里的required去除,并把他移动到rules的规则之中即可。

// js
{ required: true, trigger: 'blur', message: '角色名称为必填项' }
级联提交表单验证

对于一些复杂的表单,我们经常会遇到在提交前需要验证多个表单的情况。

由于element的最后validate方法是异步的。

如果每个表单都是相互独立的话,我们没必要同步的去验证所有的表单。

因此可以将每个独立的表单封装成Promise,再使用Promise.all进行回调处理。

可以参考下面使用了async/await的vue代码。

// 进行异步表单验证
async validateData () {
 this.formValidatePromiseArr = []
 this.formList.map((form, index) => {
  this.validateEachForm(form, `form${index}`)
 })
 // 如果没有全部验证成功,则进入捕获的错误处理
 try {
  await Promise.all(this.formValidatePromiseArr)
  console.log('finish')
  this.next()
 } catch (error) {
  console.log(error)
 }
},
// 校验每个独立表单数据
validateEachForm (form, name) {
 let formResult = new Promise((resolve, reject) => {
  // 利用ref取到要验证的表单
  this.$refs[name][0].validate((valid) => {
   if (valid) {
    resolve()
   } else {
    console.log(`${name}的数据不完整`)
    reject()
   }
  })
 })
 this.formValidatePromiseArr.push(formResult)
}
嵌套属性校验

对于复杂表单,我们难免需要进行更深层级的验证。

对于明确知道要验证的嵌套属性,可以在rules对象定义时,使用字符串形式指定要验证的属性,同事在prop绑定相应值。

// html
<el-form-item label="年龄信息" prop="info.age">
 <el-input v-model="form.info.age"></el-input>  
</el-form-item>

// js
rules: {
 name: [{required: true, trigger: 'blur', message: 'required'}],
 'info.age': [{required: true, trigger: 'blur', message: 'required'}]
},

对于在循环之中动态绑定的属性,则需要进行动态的prop绑定(必须是字符串形式的属性取值),再绑定指定的rules,例如

// html
<div v-for="info in form.infoList">
 <el-form-item label="年龄信息" :prop="`infoList[${index}].age`" :rules="rules.age">
  <el-input v-model="info.age"></el-input>  
 </el-form-item>
</div>

// js
rules: {
 age: [{required: true, trigger: 'blur', message: 'required'}]
},

这样就能顺利的绑定上我们需要的验证规则。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
js数组依据下标删除元素
Apr 14 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
JS使用数组实现的队列功能示例
Mar 04 #Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 #Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 #Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 #Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 #Javascript
微信小程序textarea层级过高的解决方法
Mar 04 #Javascript
浅析vue中的MVVM实现原理
Mar 04 #Javascript
You might like
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
python ---lambda匿名函数介绍
2019/03/13 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
大学生毕业自荐信
2013/10/10 职场文书
高一自我鉴定
2013/12/17 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
七夕情人节促销方案
2014/06/07 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
外科护士长工作总结
2015/08/12 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
KVM基础命令详解
2022/04/30 Servers