详解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 相关文章推荐
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
canvas 实现中国象棋
Feb 17 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 Javascript
html5调用摄像头截图功能
Jan 18 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
PHP个人网站架设连环讲(二)
2006/10/09 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python单例模式实例分析
2015/01/14 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python实现选择排序
2017/06/04 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
幼教简历自我评价
2014/01/28 职场文书
大学生社会实践感想
2015/08/11 职场文书
团结主题班会
2015/08/13 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python