Iview多行表单增删、表单校验

iview的表单校验问题
1、简单校验

 

 

 

(1)给外层的Form 设置属性 :model='formDataInfo'；属性 :rules :'ruleValidate'; 属性ref='formValidate'

(2)在需要校验的 FormItem 设置属性 prop 指向对应字段。需要注意的是：FormItem 的prop属性值必须和下面的v-model字段对应,，否则无效。

 

 

 

(3)在data里添加校验规则

ruleValidate: {//主表单验证规则
                    url: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }]
                },

(4)事件中校验

searchPageData() {//页面初始化重置表单
                let vm = this;
                vm.$refs['formValidate'].resetFields(); //重置主表单
            },
 sureOk() {
        let vm = this;
        let isvalid = true; //默认校验不通过
        vm.$refs['formValidate'].validate((valid) => {
        if(valid) {
            //验证通过
                       } 
        });
    }

**注意：如果v-model并不是像上面那样，只是单字段的，是两层对象的，类似这样：v-model="formDataInfo.series.type"，那么FormItem 的prop属性也要写成：prop='series.type'，并且在data校验时，加引号，否则校验不通过。

'series.type': [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }]

2、增删多行并校验

 

 

(1)给外层的Form 设置属性 :model='formDataInfo'；属性 :rules :'ruleValidate'; 属性ref='formValidate'

(2)给里面的行，每行设置一个Form。

(3)具体代码附上

 

ruleValidate: {//主表单验证规则 url: [{ required: true, message: '不能为空', trigger: 'blur' }] },