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 相关文章推荐
javascript 自动转到命名锚记
Jan 10 Javascript
jQuery select的操作实现代码
May 06 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
JavaScript文档对象模型DOM
Nov 20 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
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python如何查看网页代码
2020/06/07 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
女方婚礼新郎答谢词
2014/01/11 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
务虚会发言材料
2014/12/25 职场文书
迟到检讨书范文
2015/01/27 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
Linux安装Docker详细教程
2022/07/07 Servers