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的颜色选择插件实例代码
Oct 02 Javascript
JavaScript delete 属性的使用
Oct 08 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
javascript canvas实现简易时钟例子
Sep 05 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
PHP脚本的10个技巧(1)
2006/10/09 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
详解Vue 全局变量,局部变量
2019/04/17 Javascript
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python读取oracle函数返回值
2016/07/18 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
什么是数组名
2012/05/10 面试题
会计的岗位职责
2014/03/15 职场文书
安全生产宣传标语
2014/06/06 职场文书
学校党支部承诺书
2015/04/30 职场文书
《1942》观后感
2015/06/08 职场文书
个人欠条范本
2015/07/03 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python