vue2动态表单验证

普通表单验证单项依靠的是prop…而动态生成的表单要用:prop。
动态验证表单的prop属性的格式：:prop="‘v-for绑定的数组.’ + index + ‘.v-model绑定的变量’；
注意v-for，要将表单的model名写进去

<el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-position="right"
      label-width="auto"
      size="small"
      style="margin: 20px auto"
    >
      <div
        v-for="(item, index) in form.device.properities"
        :key="index"
        class="text"
      >
        <el-col :lg="7" :md="10" :sm="12" :xl="6" :xs="12">
          <el-form-item
            :label="item.name"
            :prop="'device.properities.' + index + '.value'"
            :rules="[
              {
                type: item.type,
                required: item.force,
                validator: validatorFactror,
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="item.value" type="text" />
          </el-form-item>
        </el-col>
      </div>
      <el-form-item style="margin-top: 20px">
          <div>
            <el-button
              type="primary"
              @click.stop="addIotDevMethod('form')"
              >保 存
            </el-button>
          </div>
        </el-form-item>
    </el-form>

<script>
export default {
  data() {
    return {
      form: {
        device:{
        	properities:[]
        }
    };
  },
  },
  method:{
	//验证用户输入的格式
    validatorFactror(rule, value, callback) {
      const ipReg =
        /^(\d{1}|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-5])\.(\d{1}|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-5])\.(\d{1}|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-5])\.(\d{1}|[1-9][0-9]|1\d\d|2[0-4]\d|25[0-5])$/;
      if (value) {
        switch (rule.type) {
          case "ip_addr":
            if (!ipReg.test(value)) {
              callback(new Error("IP地址不合法"));
            } else {
              callback();
            }
            break;
          default:
            callback();
            break;
        }
      } else {
        callback();
      }
    },
    //提交表单时
    addIotDevMethod(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        //提交表单前验证表单必填项是否都填写，如果都填写，valid返回true,可以提交表单
        if (valid) {
          //此处编写表单验证通过的业务逻辑
        }
      });
    },
  }
};
</script>