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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
深入了解Vue3模板编译原理
Nov 19 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
isset和empty的区别
2007/01/15 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
jqTransform美化表单
2015/10/10 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python写程序统计词频的方法
2019/07/29 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
python 装饰器重要在哪
2021/02/14 Python
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
如何清空Session
2015/02/23 面试题
学生学习总结的自我评价
2013/10/22 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
努力学习保证书
2015/02/26 职场文书
搞笑结婚保证书
2015/05/08 职场文书
常住证明范本
2015/06/23 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书