开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情

form-item对象配置校验规则

由于数据是循环出来的，只需要在el-form-item上定义rules就可以，

  <el-form :model="field" :rules="rules" ref="form"  label-width="80px">
    <templete v-for="item in form_item" :key="item.prop">
      <el-form-item
        v-if="item.type === 'input'"
        :label="item.label"
        :prop="item.prop"
        :rules="item.rules"
      >
        <el-input v-model="field[item.prop]"></el-input>
      </el-form-item>

    </templete>
  </el-form>

想在那个上面定义规则，只需要在form_item中定义，我们在名字上面定义一下

        form_item: [
            {
                type: 'input', 
                prop: 'name', 
                label: "姓名",
                rules: [
                    {required: true, message: "必填"}
                ]

            },
            {type: 'select', prop: 'gender', label: "性别"}
        ],

自定义校验规则

利用validator字段去弄一个自定义函数 validateName(),通过callback返回 请输入10

  data() {
    const validateName = (rule, value, callback) => {
        if(value && value !== '10') {
            callback(new Error("请输入10"))
        } else {
        callback()
        }
        
        
    }
    return {
        form_item: [
            {
                type: 'input', 
                prop: 'name', 
                label: "姓名",
                rules: [
                    {min: 3, max: 10, message: "请输入3~10个字符", trigger: 'change'},
                    { validator: validateName, trigger: 'blur'}
                ]

            },
            {type: 'select', prop: 'gender', label: "性别"}
        ],
      
       
    }
  }

配置phone手机号校验规则

像这种的就可以使用一些 正则表达式 这里我们用 /^[1][3,4,5,7,8,9][0-9]{9}$/

     form_item: [
        {
          type: "input",
          prop: "name",
          label: "手机号",
          rules: [
            { required: true, message: "请输入手机号码", trigger: "blur" },
            {
              required: true,
              pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
              message: "请输入正确的手机号码",
              trigger: "blur",
            },
          ],
        },
        { type: "select", prop: "gender", label: "性别" },
      ],

附完整代码

//父组件
<template>
  <a-form :item="form_item" :field="form_field" :rules="form_rules"></a-form>
</template>
<script>
export default {
  name: "Home",
  components: {
    "a-form": () => import("@/components/form/index"),
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (value && value !== "10") {
        callback(new Error("请输入10"));
      } else {
        callback();
      }
    };
    return {
      form_item: [
        {
          type: "input",
          prop: "name",
          label: "手机号",
          rules: [
            { required: true, message: "请输入手机号码", trigger: "blur" },
            {
              required: true,
              pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
              message: "请输入正确的手机号码",
              trigger: "blur",
            },
          ],
        },
        { type: "select", prop: "gender", label: "性别" },
      ],
      form_field: {
        name: "初始化",
        gender: "",
      },
      form_rules: {
        // name: [
        //     {required: true, message: "必填"}
        // ]
      },
    };
  },
};
</script>

//组件
<template>
  <el-form :model="field" :rules="rules" ref="form"  label-width="80px">
    <templete v-for="item in form_item" :key="item.prop">
      <el-form-item
        v-if="item.type === 'input'"
        :label="item.label"
        :prop="item.prop"
        :rules="item.rules"
      >
        <el-input v-model="field[item.prop]"></el-input>
      </el-form-item>
      <el-form-item
        v-if="item.type === 'select'"
        :label="item.label"
        :prop="item.prop"
        :rules="item.rules"
      >
        <el-select v-model="field[item.prop]"></el-select>
      </el-form-item>
    </templete>
  </el-form>
</template>
<script>
export default {
  name: "Form",
  props: {
    item: {
      type: Array,
      default: () => [],
    },
    field: {
        type: Object,
        default: () => ({})
    },
    rules: {
        type: Object,
        default: () => ({})
    }
  },
  data() {
    return {
      form_item: [],
      form: {
        name: "",
      },
    };
  },
  beforeMount() {
    this.form_item = this.item;
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>