vue+elementui表单数组对象深层嵌套之自定义验证规则

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item prop="items">
      <!-- 循环渲染表单数组 -->
      <el-row v-for="(item, index) in form.items" :key="index">
        <el-col :span="12">
          <el-form-item
            :prop="'items.' + index + '.name'"
            :rules="{
              required: true,
              message: '项目名称不能为空',
              trigger: 'blur',
            }"
          >
            <el-input v-model="item.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :prop="'items.' + index + '.value'"
            :rules="{
              validator: validateValue,
              trigger: 'blur',
            }"
          >
            <el-input v-model="item.value"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        items: [
          { name: '', value: '' },
          // ...可以添加更多的items
        ],
      },
      rules: {},
    };
  },
  methods: {
    validateValue(rule, value, callback) {
      // 自定义验证规则，例如检查值是否符合某种模式
      if (!value.match(/^[a-zA-Z0-9_]+$/)) {
        callback(new Error('值必须由字母、数字和下划线组成'));
      } else {
        callback();
      }
    },
    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('表单验证失败!');
          return false;
        }
      });
    },
  },
};
</script>

这个代码示例展示了如何在Vue中使用Element UI的<el-form>组件来创建一个包含数组对象的表单，并使用自定义验证规则。在这个例子中，我们定义了一个表单数组items，并为每个数组项的name和value属性添加了验证规则，包括必填性验证和自定义正则表达式验证。如果表单验证失败，会打印错误信息，并阻止表单的提交。