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(["fileNo"]);
  
  // 清除所有校验错误
  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" }
]

实现复杂的验证逻辑，比如密码确认、条件验证等场景

validator：是Element Plus表单验证系统中的一个属性，用于指定自定义验证函数。

这个验证函数有三个参数：

1、rule - 验证规则本身

2、value - 验证的值

3、callback - 验证完成后的回调函数，用于返回验证结果

这种自定义验证器比内置验证规则更加灵活，可以实现复杂的验证逻辑，比如密码确认、条件验证等场景。

<script setup lang="ts" name="UserResetPassword">
......
// 定义数据模型，用于页面绑定的数据
const passwordData = ref({
  oldPassword: "",
  newPassword1: "",
  newPassword2: ""
});
// 表单实例
const formRef = ref<FormInstance>();
// 密码检查，检查密码是否符合规则（自定义校验规则）
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入新的密码！"));
  } else {
    if (passwordData.value.newPassword2 !== "") {
      if (!formRef.value) return;
      formRef.value.validateField("newPassword2");
    }
    callback();
  }
};
// 密码检查，检查两次密码是否一致（自定义校验规则）
const validatePasswordSame = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请确认密码！"));
  } else if (value !== passwordData.value.newPassword1) {
    callback(new Error("两次输入的密码不匹配!"));
  } else {
    callback();
  }
};
// 表单校验规则，
// validator：是Element Plus表单验证系统中的一个属性，用于指定自定义验证函数。
// 这个验证函数有三个参数：
// 1、rule - 验证规则本身
// 2、value - 验证的值
// 3、callback - 验证完成后的回调函数，用于返回验证结果
// 这种自定义验证器比内置验证规则更加灵活，可以实现复杂的验证逻辑，比如密码确认、条件验证等场景。
const formRules = reactive<FormRules<typeof passwordData>>({
  oldPassword: [{ required: true, message: "原来的密码不能为空！", trigger: "blur" }],
  newPassword1: [{ validator: validatePassword, trigger: "blur" }],
  newPassword2: [{ validator: validatePasswordSame, trigger: "blur" }]
});

// 确定
const onConfirmClick = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  // 校验标识，默认校验不通过
  let rulesValid = false;
  // 表单校验
  await formEl.validate((valid) => {
    if (valid) {
      // 规则校验通过
      rulesValid = true;
    } else {
      // 规则校验不通过
      rulesValid = false;
    }
  });

  // 规则校验不通过，退出
  if (!rulesValid) return;

  // 发送请求，更新密码
  // todo
};
......
</script>

<template>
  <div class="container">
    <!-- 修改密码表单，表单校验的关键属性 ref、model、rules -->
    <el-form ref="formRef" :model="passwordData" :rules="formRules">
      <el-form-item>
        <h1 class="h1">修改密码</h1>
      </el-form-item>
      <el-form-item prop="oldPassword">
        <el-input
          class="input"
          v-model="passwordData.oldPassword"
          :prefix-icon="Lock"
          type="password"
          placeholder="原来的密码"
          show-password />
      </el-form-item>
      <el-form-item prop="newPassword1">
        <el-input
          class="input"
          v-model="passwordData.newPassword1"
          :prefix-icon="Lock"
          type="password"
          placeholder="新的密码"
          show-password />
      </el-form-item>
      <el-form-item prop="newPassword2">
        <el-input
          class="input"
          v-model="passwordData.newPassword2"
          :prefix-icon="Lock"
          type="password"
          placeholder="确认密码"
          show-password />
      </el-form-item>
      <el-form-item>
        <el-button class="button" type="primary" @click="onConfirmClick(formRef)">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

应用效果：

具体应用

应用效果

代码：

1、设置校验规则

// 表单校验规则
const formRules = reactive<FormRules<IQualityFile>>({
  fileNo: [
    {
      required: true,
      message: "文件编号不能为空",
      trigger: "blur"
    },
    {
      validator: (rule, value, callback) => {
        if (value && value.length > 30) {
          callback(new Error("文件编号不能超过30个字符"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  fileName: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("文件名称不能为空"));
        } else if (value.length > 200) {
          callback(new Error("文件名称不能超过200个字符"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  smallCategory: [{ required: true, message: "所属小类不能为空", trigger: "blur" }],
  detailCategory: [{ required: true, message: "所属类别不能为空", trigger: "blur" }],
  orderNo: [
    {
      validator: (rule, value, callback) => {
        if (value && value.length > 10) {
          callback(new Error("序号不能超过10位长度"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
});

2、模板中设置 rules 和 prop

      <el-form ref="formRef" :model="qualityFileObj" :rules="formRules" label-width="auto" style="margin: 8px 16px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="序号" label-position="right" prop="orderNo">
              <el-input v-model="qualityFileObj.orderNo" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件编号" label-position="right" prop="fileNo">
              <el-input ref="fileNoInputRef" v-model="qualityFileObj.fileNo" clearable :disabled="!props.isNew" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="文件名称" label-position="right" prop="fileName">
              <el-input id="input-filename" v-model="qualityFileObj.fileName" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="版本号" label-position="right">
              <el-input v-model="qualityFileObj.edition" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="修改记录" label-position="right">
              <el-input v-model="qualityFileObj.modifyRecord" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="所属小类" label-position="right" prop="smallCategory">
              <el-select
                v-model="qualityFileObj.smallCategory"
                placeholder="请选择"
                clearable
                @clear="handleSmallCategoryClear">
                <el-option v-for="item in fileSmallCategoryOptionList" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属类别" label-position="right" prop="detailCategory">
              <el-select
                v-model="qualityFileObj.detailCategory"
                placeholder="请选择"
                clearable
                filterable
                default-first-option>
                <el-option v-for="item in fileDetailCategoryOptionList" :label="item.label" :value="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

# vue.js # javascript # 前端
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

KMP全栈开发：从Android到AI Agent的技术演进与实践

文章摘要 Kotlin Multiplatform (KMP) 是一种现代化的跨平台开发解决方案，旨在解决传统移动开发中多端代码冗余、维护成本高的问题。KMP通过分层架构实现业务逻辑的共享（Common层）和平台能力的差异化适配（Expect/Actual机制），支持Android、iOS、Web、桌面及后端开发，并能与AI Agent生态无缝集成。相比Flutter和React Native，K

avatar AI Agent技术社区
cover

在制造业做 Agent PoC 两年，我劝老板们别问“一个 Agent 多少钱“

avatar AI Agent技术社区
cover

只读、幂等、超时和限流为什么属于能力声明？

avatar AI Agent技术社区