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学习笔记(七) js函数介绍
Jun 19 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
微信小程序网络请求实现过程解析
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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
PHP实现分页的一个示例
2006/10/09 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
python绘制规则网络图形实例
2019/12/09 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
Java中实现多态的机制是什么?
2014/12/07 面试题
Overload和Override的区别
2012/09/02 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
学校地质灾害防治方案
2014/06/10 职场文书
医院护士工作检讨书
2014/10/26 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
学生会工作感言
2015/08/07 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
python 如何执行控制台命令与操作剪切板
2021/05/20 Python