详解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 valueOf 使用方法
Dec 28 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
AJAX在JQuery中的应用详解
Jan 30 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
php去除换行(回车换行)的三种方法
2014/03/26 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
Python中apply函数的用法实例教程
2014/07/31 Python
Python随机生成彩票号码的方法
2015/03/05 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
儿童python练习实例
2018/05/27 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
更夫岗位责任制
2014/02/11 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
委托培训协议书
2014/11/17 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
质量保证书
2015/01/17 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis