VUE3 表单校验

Vue3 实现保单校验可结合主流 UI 框架（如 Ant Design Vue、Element Plus）的校验能力，以下为通用实现方案和关键步骤：

一、基础表单数据定义

使用 reactive 或 ref 定义保单表单数据模型，包含需校验字段：

import { reactive } from 'vue';

const formModel = reactive({
  policyNumber: '',      // 保单号
  applicant: '',         // 投保人
  insuredDate: '',       // 投保日期
  province: '',          // 省份
  // ...其他字段
});

二、校验规则配置

通过 rules 对象定义各字段校验规则，支持正则、必填、自定义校验函数‌25：

const rules = {
  policyNumber: [
    { required: true, message: '保单号必填' }, 
    { pattern: /^[A-Z0-9]{8,20}$/, message: '保单号格式错误' }
  ],
  applicant: [
    { required: true, message: '投保人不能为空' },
    { validator: (_, value) => value.length >= 2 && value.length <= 50, message: '长度需在2-50字符' }
  ],
  insuredDate: [
    { required: true, message: '投保日期必选' }
  ],
  province: [
    { required: true, message: '请选择省份' }
  ]
};

三、表单校验触发方式

‌1. 提交时整体校验‌
绑定表单 ref，通过 validate 方法触发校验‌15：

<template>
  <a-form :model="formModel" :rules="rules" ref="formRef">
    <!-- 表单项 -->
    <a-button @click="handleSubmit">提交</a-button>
  </a-form>
</template>

<script setup>
const formRef = ref();
const handleSubmit = async () => {
  try {
    await formRef.value.validate();
    // 校验通过，提交数据
  } catch (error) {
    console.error('校验失败:', error);
  }
};
</script>

2‌. 动态字段校验‌
针对循环生成的表单项（如多被保人），使用动态 prop 路径‌4：

<div v-for="(item, index) in insuredList" :key="index">
  <a-form-item 
    :name="['insuredList', index, 'name']" 
    :rules="[{ required: true, message: '被保人姓名必填' }]"
  >
    <a-input v-model:value="item.name" />
  </a-form-item>
</div>

四、高级场景处理

• 异步校验‌：调用接口验证保单号唯一性，使用 validator 返回 Promise‌16：

policyNumber: [
  { 
    validator: (_, value) => new Promise((resolve, reject) => {
      checkPolicyUnique(value).then(valid => {
        valid ? resolve() : reject('保单号已存在');
      });
    })
  }
]

-‌ 重置校验状态‌：调用 resetFields 方法清空校验提示‌45：

Copy Code
const resetForm = () => {
  formRef.value.resetFields();
};

五、UI 框架适配

-‌ Ant Design Vue‌：通过 <a-form> 的 name 和 rules 属性绑定规则，错误提示自动渲染‌5。
‌- Element Plus‌：使用 <el-form> 的 rules 和 <el-form-item> 的 prop 属性‌23。