Vue.js 表单校验规则（Rules）详解-Reverse

一、核心配置属性

在 Vue UI 组件库（如 Element Plus, Naive UI, Ant Design Vue）中，rules 通常是一个对象，其键对应表单字段的 path 或 prop。

属性名称	类型	功能描述
`required`	`boolean`	是否必填。
`message`	`string`	验证失败时显示的提示信息。
`trigger`	`string / array`	触发校验的事件，如 `blur`, `change`, `input`。
`type`	`string`	数据类型校验，如 `email`, `number`, `url`, `array`。
`min / max`	`number`	限制字符串长度、数值大小或数组长度。
`pattern`	`RegExp`	正则表达式校验（如手机号、验证码）。
`validator`	`function`	自定义校验函数，处理复杂的业务逻辑。

二、实战案例：Naive UI 节点表单

在 setup 语法糖中，我们通过 rules 对象定义每个字段的校验逻辑。

代码段

<script setup>
import { ref } from "vue";

const formValue = ref({
  name: "",
  type: null,
  dispatch: [],
});

const rules = {
  name: [
    { required: true, message: "请输入节点名称", trigger: "blur" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
  ],
  type: [
    { required: true, message: "请选择节点类型", trigger: "change" }
  ],
  dispatch: [
    { 
      type: 'array', 
      required: true, 
      message: "请选择调度类型", 
      trigger: ["blur", "change"] 
    }
  ]
};
</script>

三、深入理解 Trigger 触发时机

合理选择 trigger 能显著提升用户体验，避免频繁的报错干扰。

事件	触发场景	推荐用法
`input`	实时触发，每输入一个字符就校验一次。	密码强度检测、实时计算逻辑。
`blur`	失去焦点时触发。	最常用。用于用户名重名检测、必填项检查。
`change`	值改变且失去焦点时触发。	下拉框（Select）、单选框（Radio）选择后校验。

💡 贴士：对于复杂的输入，可以同时传入数组 trigger: ['blur', 'input']，实现双重保障。

四、进阶：自定义验证器（Validator）

当内置规则无法满足需求（如：两次密码输入是否一致、异步检查用户名是否重复）时，需要使用 validator。

规范格式：

JavaScript

const validatePassword = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('密码不能为空'));
  }
  if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(value)) {
    callback(new Error('密码必须包含字母和数字，且不少于8位'));
  } else {
    callback(); // 校验通过必须调用 callback()
  }
};

// 在 rules 中引用
const rules = {
  password: [{ validator: validatePassword, trigger: 'blur' }]
};

五、表单整体验证与防止默认提交

在提交表单前，必须手动调用 validate 方法。

JavaScript

const handleSave = async () => {
  if (!formRef.value) return;
  
  // 执行整体验证
  formRef.value.validate((errors) => {
    if (!errors) {
      // 校验通过，执行 API 请求
      console.log("提交数据:", formValue.value);
    } else {
      // 校验失败
      console.error("请检查输入项", errors);
    }
  });
};

关于 e.preventDefault()：

在原生 <form> 标签中点击 <button> 会触发页面刷新。在 Vue 开发者看来，我们通常使用 @submit.prevent 语法糖来代替手动编写 e.preventDefault()，更加优雅：

代码段

<form @submit.prevent="handleSave"> ... </form>

文章版权归作者所有，未经允许请勿转载。

THE END

Vue.js 表单校验规则（Rules）详解

一、 核心配置属性

二、 实战案例：Naive UI 节点表单

三、 深入理解 Trigger 触发时机

四、 进阶：自定义验证器（Validator）

五、 表单整体验证与防止默认提交

请登录后发表评论

一、核心配置属性

二、实战案例：Naive UI 节点表单

三、深入理解 Trigger 触发时机

四、进阶：自定义验证器（Validator）

五、表单整体验证与防止默认提交