详解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 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
原生js实现回复评论功能
Jan 18 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
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
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
prototype1.4中文手册
2006/09/22 Javascript
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python实现分段线性插值
2018/12/17 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
python爬虫可以爬什么
2020/06/16 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
销售顾问的岗位职责
2013/11/13 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS