表单验证

验证规则

基本结构

const rules = {
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
}

每个字段对应一个规则数组；只有一个规则时也可以直接传入一个规则对象到 el-form-item 的 :rules。

常用参数

参数	类型	使用方法
`required`	`boolean`	`true` 表示不能为空。输入框会检查空字符串，数组会检查空数组。
`message`	`string`	校验失败时显示的提示文字。建议每条规则单独设置。
`trigger`	`'blur' \| 'change' \| Array`	触发时机。输入框通常用 `blur`，选择器、单选、多选、日期通常用 `change`，也可以写 `['blur', 'change']`。
`type`	`string`	类型校验，如 `'string'`、`'number'`、`'boolean'`、`'array'`、`'date'`、`'email'`、`'url'`。
`min` / `max`	`number`	字符串表示长度，数组表示元素个数，数字表示数值范围。可单独使用。
`len`	`number`	要求字符串、数组或数字的长度/值必须等于指定值。
`pattern`	`RegExp`	使用正则表达式校验字符串格式。
`validator`	`Function`	自定义同步或异步校验函数，适合确认密码、远程查重等场景。
`whitespace`	`boolean`	配合 `required` 使用；设为 `true` 时，只有空格的字符串也会校验失败。

规则来自 async-validator。同一字段的规则可以组合，但建议把“必填”和“格式/长度”拆成多条，提示更准确。

required、message、trigger

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      min: 3,
      max: 20,
      message: '用户名长度为 3 到 20 个字符',
      trigger: ['blur', 'change'],
    },
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' },
  ],
}

required 只负责判断是否有值，不负责判断格式；message 只负责提示，不会自动生成。提交时调用 formRef.validate() 会执行所有规则，不受 trigger 限制。

常用例子

邮箱和手机号

const rules = {
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern: /^1\d{10}$/,
      message: '请输入 11 位手机号',
      trigger: 'blur',
    },
  ],
}

密码长度和确认密码

import { reactive } from 'vue'
import type { FormRules } from 'element-plus'
 
const form = reactive({
  password: '',
  confirmPassword: '',
})
 
const rules: FormRules<typeof form> = {
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, message: '密码至少 8 位', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (_rule, value, callback) => {
        if (value !== form.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
}

自定义校验函数必须调用 callback() 表示通过，或调用 callback(new Error('提示')) 表示失败。密码变化后，可以调用 formRef.validateField('confirmPassword') 重新校验确认密码。

数字、日期和数组

<el-form-item label="年龄" prop="age">
  <el-input v-model.number="form.age" />
</el-form-item>
 
<el-form-item label="生日" prop="birthday">
  <el-date-picker v-model="form.birthday" type="date" />
</el-form-item>

const rules = {
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', min: 18, max: 120, message: '年龄应为 18 到 120', trigger: 'blur' },
  ],
  birthday: [
    { type: 'date', required: true, message: '请选择生日', trigger: 'change' },
  ],
  hobbies: [
    { type: 'array', required: true, message: '至少选择一项兴趣', trigger: 'change' },
  ],
}

type: 'number' 不能把字符串自动转换成数字；使用 <el-input v-model.number="…" />，或在提交前自行转换。

提交和重置

<el-form ref="formRef" :model="form" :rules="rules">
  <!-- 表单项省略 -->
  <el-button type="primary" @click="submitForm">提交</el-button>
  <el-button @click="formRef?.resetFields()">重置</el-button>
</el-form>

import { ref } from 'vue'
import type { FormInstance } from 'element-plus'
 
const formRef = ref<FormInstance>()
 
const submitForm = async () => {
  if (!formRef.value) return
 
  const valid = await formRef.value.validate()
  if (valid) {
    // 通过校验后提交接口
  }
}

使用注意

rules 中的键名、prop、v-model 必须指向同一个字段。
el-select、el-date-picker 等非文本组件通常使用 trigger: 'change'。
数字校验时注意实际值类型；字符串 '18' 不等于数字 18。
仅设置 required 不会检查邮箱、手机号、长度等格式，需要额外添加 type、pattern 或 validator。
复杂校验应同时保留前端提示和后端校验，前端校验不能替代接口校验。

Ceryn

探索