Vue3+TypeSprict+Element Plus 表单校验

1、应用效果

2、代码

QualityFileInfoDialog.vue

<script setup lang="ts" name="QualityFileInfoDialog">
......
// 表单实例
const formRef = ref<FormInstance>();
// 表单校验规则
const formRules = reactive<FormRules<IQualityFile>>({
  fileNo: [{ required: true, message: "文件编号不能为空", trigger: "blur" }],
  fileName: [{ required: true, message: "文件名称不能为空", trigger: "blur" }]
});

// 打开模态框
const openDialog = async () => {
......
  await nextTick();

  // 清除所有校验错误
  formRef.value?.clearValidate();

  dialogVisible.value = true;
};

// 确定
const onConfirmClick = async () => {
  // 表单校验，校验不通过，退出
  if (!(await VerificationFormRules())) return;
  
......

  dialogVisible.value = false;
};

// 表单校验
const VerificationFormRules = async () => {
  if (!formRef.value) return true;

  // 校验标识，默认校验不通过
  let rulesValid = false;
  // 表单校验
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      // 规则校验通过
      rulesValid = true;
    } else {
      // 规则校验不通过
      rulesValid = false;
      console.log("规则校验不通过的属性有：", fields);
    }
  });

  return rulesValid;
};
......
</script>

<template>
......
      <el-form ref="formRef" :model="qualityFileObj" :rules="formRules">
......
            <el-form-item label="文件编号" label-position="right" prop="fileNo">
......
            <el-form-item label="文件名称" label-position="right" prop="fileName">
......
</template>

在 Vue3 的表单校验中，trigger是用于指定 ​​何时触发校验规则​​ 的关键属性，它决定了校验逻辑的执行时机。以下是详细说明：

一、trigger的作用

trigger定义了表单字段值在哪种交互行为下会触发校验规则，常见的取值包括：

1.​​blur

•​​触发时机​​：当表单控件失去焦点时（如用户点击输入框外部或按 Tab 键切换字段）

•适用场景​​：适合在用户完成输入后校验，例如邮箱格式、手机号格式等需要完整输入后验证的情况

•示例​​：{ required: true, message: "文件编号不能为空", trigger: "blur" }

2.change

•触发时机​​：当表单控件的值发生变化时（如用户每输入一个字符）

•适用场景​​：需要实时反馈输入合法性的场景，例如密码强度动态提示

•示例​​：{ pattern: /^[a-zA-Z]+$/, message: "只能输入字母", trigger: "change" }

3.submit​​（部分库支持）

•触发时机​​：仅在表单提交时校验

二、trigger的注意事项

1. 1.默认行为​​
   • •如果不指定 trigger，部分校验库可能默认使用 blur或同时支持 blur和 change
2. 2.性能权衡​​
   • •change的实时性更好但可能增加性能开销（频繁触发校验），而 blur更节省资源但反馈延迟
3. 3.组合使用​​
   • •可以为一个字段配置多个规则，分别设置不同的 trigger。例如：

password: [
  { required: true, message: "密码不能为空", trigger: "blur" },
  { min: 6, message: "密码至少6位", trigger: "change" }
]