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 图片延迟加载并等比缩放插件
Nov 09 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
vue-quill-editor实现图片上传功能
Aug 08 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
微信小程序云开发之使用云数据库
May 17 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
微信小程序网络请求实现过程解析
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操作MongoDB类实例
2015/06/17 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
JS中获取数据库中的值的方法
2013/07/14 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python中logging库的使用总结
2017/10/18 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
执行力心得体会
2013/12/31 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
买房委托公证书
2014/04/08 职场文书
学校安全管理责任书
2014/07/23 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang