ElForm 动态表单检验

ElForm 动态表单检验

• 动态表单分为2种
  1. 追加重复的项
  2. 根据条件不同，隐藏某项，完成某项

追加重复的项

<template>
  <el-form ref="formRef" :model="dynamicForm">
    <el-form-item :rules="rules.email" label="Email" prop="email">
      <el-input v-model="dynamicForm.email"></el-input>
    </el-form-item>

    <template v-for="(item,index) in dynamicForm.goods" :key="item.key">
      <el-form-item :prop="'goods.' + index +'.price'" :rules="rules.price" label="Price">
        <el-input v-model.number="item.price"></el-input>
      </el-form-item>
      <el-form-item :prop="'goods.'+index+'.goods'" :rules="rules.goods" label="Goods">
        <el-input v-model="item.goods"></el-input>
      </el-form-item>

      <el-button type="danger" @click="deleteItem(index)">删除</el-button>
    </template>
    <el-form-item>
      <el-button @click="addFormItem">新增动态表单</el-button>
      <el-button type="primary" @click="submit">submit</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>


<script lang="ts" setup>


//var validateLastCompanyUnit = (rule, value, callback) => {
// "dc_talent_work_list.0.last_company_unit"
// let thisField = rule.field.split(".")[1];
// if(this.form.dc_talent_work_list[thisField].last_company_name != '' && value==""){
//    callback(new Error("公司部门不能为空"));
// }
//   callback();
// };
// 工作经历校验规则
// workListRule:{
//   last_company_unit: { validator: validateLastCompanyUnit,trigger: "blur"},
// }


import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

interface Goods {
  price: number,
  key: number,
  goods: string,
}

const formRef = ref<FormInstance>();
const dynamicForm = reactive<{ email: string, goods: Goods[] }>({
  email: "",
  goods: []
});


const rules = reactive<FormRules>(
  {
    email: [
      {
        required: true,
        message: "此项是必填项",
        trigger: "change"
      }
    ],
    price: [{
      required: true,
      message: "此项是必填项",
      trigger: "change"
    }],
    goods: [{
      required: true,
      message: "此项是必填项",
      trigger: "change"
    }]

  }
);

// {商品，单价}
const addFormItem = () => {
  dynamicForm.goods.push({
    price: 0,
    goods: "",
    key: +new Date()
  });
};

const deleteItem = (index) => {
  dynamicForm.goods.splice(index, 1);
};


const submit = () => {
  if (!formRef.value) {
    return;
  }
  console.log("submit :::", dynamicForm);
  formRef.value.validate((isValid, fields) => {
    if (isValid) {
      console.log("完成校验");
    } else {
      console.warn("校验失败", fields);
    }
  }).then(() => {
    console.log("then--->");
  }).catch(e => {
    console.error(e);
  });
};

const reset = () => {
  if (!formRef.value) {
    return;
  }

  formRef.value.resetFields();

};

</script>

根据条件不同，隐藏某项，完成某项

效果

<template>
  <el-form ref="formRef" :form="rules" :model="dynamicForm"  >

    <el-form-item label="隐藏phone">
      <el-switch v-model="dynamicForm.phoneHide" />
    </el-form-item>

    <el-form-item label="需要phone校验">
      <el-switch v-model="dynamicForm.phoneValidate" />
    </el-form-item>

    <el-form-item label="Email" prop="email" :rules="rules.email">
      <el-input v-model="dynamicForm.email"></el-input>
    </el-form-item>

    <template v-if="!dynamicForm.phoneHide">
      <el-form-item label="Phone" prop="phone" :rules="dynamicForm.phoneValidate? rules.phone : null">
        <el-input v-model="dynamicForm.phone"></el-input>
      </el-form-item>
    </template>


    <el-form-item>

      <el-button type="primary" @click="submit">submit</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>


<script lang="ts" setup>

 

import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";


const formRef = ref<FormInstance>();
const dynamicForm = reactive<{ email: string, phone: string, phoneHide: boolean , phoneValidate:boolean}>({
  email: "",
  phone: "",
  phoneHide: false,
  phoneValidate:true,
});


const rules = reactive<FormRules>(
  {

    email: [
      {
        required: true,
        message: "此项是必填项",
        trigger: "change"
      }
    ],
    phone: [
      {
        required: true,
        message: "此项必填项"
      }
    ]
  }
);


const submit = () => {
  if (!formRef.value) {
    return;
  }
  console.log("submit :::", dynamicForm);
  formRef.value.validate((isValid, fields) => {
    if (isValid) {
      console.log("完成校验");
    } else {
      console.warn("校验失败", fields);
    }
  }).then(() => {
    console.log("then--->");
  }).catch(e => {
    console.error(e);
  });
};

const reset = () => {
  if (!formRef.value) {
    return;
  }

  formRef.value.resetFields();

};

</script>

总结：
1. 动态表单更推荐在form-item上添加rule
2. 动态表单在form上声明的rules，子项未渲染，不校验 rule
3. 校验规则可以动态添加或移除，子项rules 声明为null，不校验规则