vue2动态表单验证与表单多层嵌套验证_vue动态表单

1、动态验证表单

普通表单验证单项依靠的是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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

2、表单多层嵌套验证

    <el-form
          :model="form"
          :rules="rules"
          label-width="100px"
          size="mini"
          ref="form"
        >
          <el-form-item label="标准标题" prop="title">
            <el-input v-model="form.title" autocomplete="off"> </el-input>
          </el-form-item>
            <div
              v-for="(item, index) in form.items"
              :key="index"
              style="display: flex; align-items: center; margin-bottom: 10px"
            >
              <el-card style="flex: 1" :body-style="{ padding: '10px' }">
                <el-form-item
                  label="项目标题"
                  prop="title"
                  :rules="getRule(item.title, rules.oneRules.title)"
                >
                  <el-input v-model="item.title" autocomplete="off"> </el-input>
                </el-form-item>
                <div
                  v-for="(ele, num) in item.options"
                  :key="num"
                  style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                  "
                >
                  <el-card style="flex: 1" :body-style="{ padding: '10px' }">
                    <el-form-item
                      label="内容"
                      prop="content"
                      :rules="
                        getRule(ele.content, rules.oneRules.twoRules.content)
                      "
                    >
                      <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                        v-model="ele.content"
                        autocomplete="off"
                      >
                      </el-input>
                    </el-form-item>

                      <div>
                        <div
                          v-for="(element, idx) in ele.options"
                          :key="idx"
                          style="display: flex"
                        >
                          <el-form-item
                            style="flex: 1"
                            prop="value"
                            :rules="
                              getRule(
                                element.value,
                                rules.oneRules.twoRules.threeRules.value
                              )
                            "
                          >
                            <el-input v-model="element.value"> </el-input>
                          </el-form-item>
                        </div>
                      </div>
                  </el-card>
                </div>
              </el-card>
          </div>
        </el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

form: {
        title: "",
        items: [
          {
            title: "",
            options: [
              {
                content: "",
                 options: [
                {
                  key: "",
                  value: "",
                },
              ],
              },
            ],
          },
        ],
      },
      rules: {
        title: [
          {
            required: true,
            message: "标题不能为空",
            trigger: ["blur", "change"],
          },
        ],
        oneRules: {
          title: "项目标题不能为空",
          twoRules: {
            content: "内容不能为空",
            threeRules: {
              value: "不能为空",
            },
          },
        },
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

    getRule(value, msg) {
      return {
        required: true,
        validator: (rule, v, callback) => {
          if (value === null || value === "") {
            callback(new Error(msg));
          }
          callback();
        },
        trigger: ["change", "blur"],
      };
    },
1
2
3
4
5
6
7
8
9
10
11
12