vue  elementUI 表单嵌套验证的实例代码


Posted in Javascript onNovember 06, 2019

一:表单一级验证

element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证

<el-form ref="form" :model="form" :rules="rules" label-width="110px" @submit.native.prevent>
<el-form-item label="客户名称:" size="small" prop="belongId">
  <el-input v-show="false" v-model="form.belongId"></el-input>
  <ComSelectorCustomer :value="form.customerName" @change="choice"></ComSelectorCustomer>
</el-form-item>

简单的表单验证很简单,在prop内绑定验证属性,然后在rules对象内定义验证方法

rules: {
     belongId: [{
      required: true,
      message: '不能为空',
      trigger: 'change'
     }]
}

二:模板一次循环渲染时表单验证

<el-row v-for="(item, index) in form.warehouseList" :key="index">
  <el-col :span="21">
    <el-form-item label="厂库名称:" size="small" :prop="'warehouseList.' + index + '.factoryName'">
      <el-select
       v-model="item.factoryName"
       clearable
       filterable>
       <el-option
         v-for="(child, ind) in factoryList"
         :key="ind"
         :label="child.label"
         :disabled="child.disabled"
         :value="child.value"></el-option>
      </el-select>
    </el-form-item>
   </el-col>
</el-row>

循环内模板验证prop绑定值就是一个问题了,因为它是循环出来的没办法直接写死在内,所以prop就需要动态绑定验证属性,这里需要注意一下,动态prop内绑定的是要和form内定义的属性名以及model绑定的值要对应上。比如上面prop里的factoryName,form.warehouseList里子元素也要有这个属性,select中model绑定的也应该是factoryName。因为是循环出来的,所以model绑定的就是‘item.factoryName'。

如果prop内绑定的验证属性名对应不上,控制台一般都会报下面这个错误

 ![cuowu.png](/img/bVbzWSa)

三:循环嵌套循环的表单验证

比如说是这种:

from: {
    warehouseList: [{
      productList: [{
        productNumber: '',
        productUnitPrice: ''
      }]
    }]
  }

要是需要监听productList中的productNumber,并且进行验证,这就是第三层的验证。

<div v-for="(itemChild, itemIndex) in item.productList" :key="itemIndex">
   <el-col :span="9">
   <el-form-item label="客户品名:" label-width="110px" size="small" :prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productName'">
    <el-input v-show="false" v-model="itemChild.productName"></el-input>
    <ComSelectorProduct :value="itemChild.productName"
    @change="choice"></ComSelectorProduct>
   </el-form-item>
 </el-col>
 <el-col :span="4">
   <el-form-item label="数量:" label-width="60px" size="small" :prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productNumber'">
    <el-input clearable v-model="itemChild.productNumber" placeholder="数量"></el-input>
   </el-form-item>
 </el-col>
</div>

prop内绑定的值需要把第一层循环时的父元素warehouseList一并写上一直写到input内绑定的model值

:prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productName'"

验证方法:

setRulesProduct() {
        let that = this
        let list1 = that.form.warehouseList
        // let list2 = that.form.warehouseList.productList
        if (list1 && list1.length) {
          list1.forEach((item, i) => {
            that.rules['warehouseList.' + i + '.factoryName'] = [{
              required: true,
              message: '请选择厂库',
              trigger: 'change'
            }]
            that.rules['warehouseList.' + i + '.orderNumber'] = [{
              required: true,
              min: 1,
              max: 20,
              validator: (rule, value, callback) => {
                if (!value) {
                  callback(new Error('订单号不能为空'))
                } else if (value.length < 1 || value.length > 20) {
                  callback(new Error('订单号请保持在1-20字符内'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }]
            that.rules['warehouseList.' + i + '.deliveryTime'] = [{
              required: true,
              message: '请选择日期',
              trigger: 'blur'
            }]

            if (item.productList && item.productList.length) {
              item.productList.forEach((childItem, childIndex) => {
                that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productName'] = [{
                  required: true,
                  message: '请选择产品',
                  trigger: 'change'
                }]
                that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productNumber'] = [{
                  required: true,
                  min: 1,
                  max: 20,
                  validator: (rule, value, callback) => {
                    if (!value) {
                      callback(new Error('产品数量不能为空'))
                    } else if (value.length < 1 || value.length > 20) {
                      callback(new Error('产品数量请保持在1-20字符内'))
                    } else {
                      callback()
                    }
                  },
                  trigger: 'blur'
                }]
                that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productUnitPrice'] = [{
                  required: true,
                  message: '请填写单价',
                  trigger: 'blur'
                }]
              })
            }
          })
        }
      }

在组件创建时调用次方法就可以了。多层嵌套验证就搞定了,互不影响。

最重要的一点就是 循环时prop内绑定的验证属性名 一定要和model绑定的值相对应上,循环嵌套过多的就需要一直往上层找,找到最上层元素。

总结

以上所述是小编给大家介绍的vue + elementUI 表单嵌套验证,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
微信小程序网络请求实现过程解析
Nov 06 #Javascript
vue 自定义右键样式的实例代码
Nov 06 #Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 #Javascript
vue 解决computed修改data数据的问题
Nov 06 #Javascript
微信小程序页面渲染实现方法
Nov 06 #Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 #Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 #Javascript
You might like
递归列出所有文件和目录
2006/10/09 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
php后门URL的防范
2013/11/12 PHP
php判断当前操作系统类型
2015/10/28 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
JS与C#编码解码
2013/12/03 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
驻村工作先进事迹
2014/08/14 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
五年级上册复习计划
2015/01/19 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
图文详解matlab原始处理图像几何变换
2021/07/09 Python
Python的property属性详细讲解
2022/04/11 Python