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 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
Vue实现todo应用的示例
Feb 20 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
php session 检测和注销
2009/03/16 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
php命令行用法入门实例教程
2014/10/27 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
django中的setting最佳配置小结
2017/11/21 Python
详解Python time库的使用
2019/10/10 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
读书演讲主持词
2014/03/18 职场文书
六个一活动实施方案
2014/03/21 职场文书
户外宣传策划方案
2014/05/25 职场文书
改革共识倡议书
2014/08/29 职场文书
教师业务学习材料
2014/12/16 职场文书
Python中的变量与常量
2021/11/11 Python