vue elementUI表单嵌套验证的实例代码

一：表单一级验证

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了梅河口免费建站欢迎大家使用！

element中from组件内表单验证通过使用el-form标签，绑定model和rules属性进行表单验证

简单的表单验证很简单，在prop内绑定验证属性，然后在rules对象内定义验证方法

rules: {
     belongId: [{
      required: true,
      message: '不能为空',
      trigger: 'change'
     }]
}

二：模板一次循环渲染时表单验证

循环内模板验证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，并且进行验证，这就是第三层的验证。

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 表单嵌套验证，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

文章名称：vue elementUI表单嵌套验证的实例代码
网站路径：http://cdiso.cn/article/ppcjhi.html

vue elementUI表单嵌套验证的实例代码

其他资讯