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中定义变量时有无var声明的区别
Aug 18 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
vue的for循环使用方法
Feb 12 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 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视频拍照上传头像功能实现代码分享
2015/10/08 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
php微信开发之图片回复功能
2018/06/14 PHP
json 定义
2008/06/10 Javascript
Jquery ui css framework
2010/06/28 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
python实现代理服务功能实例
2013/11/15 Python
python的unittest测试类代码实例
2017/12/07 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
Python通过socketserver处理多个链接
2020/03/18 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
python中uuid模块实例浅析
2020/12/29 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
羽毛球比赛策划方案
2014/06/13 职场文书
宣传普通话标语
2014/06/27 职场文书
感谢信格式范文
2015/01/22 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸