Element Plus中表单常用的校验规则

闪电

2024 年 12 月 23 日

36 次浏览

暂无评论

3178字数

技术

在使用 Element Plus 进行表单校验时，可以定义多种常用的校验规则。以下是一些常见的校验规则及其用法：

常用校验规则

触发时机 (trigger)
- 用于指定校验触发的时机，常见的有 blur（失去焦点时）和 change（内容改变时）。

{ required: true, message: '该字段不能为空', trigger: 'blur' }

必填校验 (required)
- 用于确保字段不能为空。

{ required: true, message: '该字段不能为空', trigger: 'blur' }

长度校验 (min 和 max)
- 用于限制字段的最小和最大长度。

{ min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }

类型校验 (type)
- 用于验证字段的类型，如 email、number 等。

{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }

正则表达式校验 (pattern)
- 用于自定义复杂的校验逻辑。

{ pattern: /^[A-Za-z\d@$!%*?&]{6,}$/, message: '密码长度至少为6个字符,且只能是数字和英文字符及符号', trigger: 'blur' }

自定义校验规则

使用 `validator`

validator 是一个函数，用于实现复杂的校验逻辑。它可以在 rules 对象中定义，并且会在指定的触发时机（如 blur 或 change）被调用。

参数定义

validator 函数接收三个参数：

rule: 当前校验规则对象。
value: 当前表单项的值。
callback: 回调函数，用于返回校验结果。如果校验通过，则调用 callback()；如果校验失败，则调用 callback(new Error('错误信息'))。

示例

下面是一个详细的示例，展示了如何在 rules 中定义 validator 函数，并解释每个参数的含义。

1. 定义表单数据和规则

import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
});

const rules = ref<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9]+$/, message: '用户名只能包含字母和数字', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^[A-Za-z\d@$!%*?&]{6,}$/, message: '密码长度至少为6个字符,且只能是数字和英文字符及符号', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
});

2. 定义 `validator` 函数

const validateConfirmPassword = (rule: any, value: string, callback: Function) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== ruleForm.password) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
};

3. 解释 `validator` 函数的参数

rule: 当前校验规则对象。在这个例子中，rule 包含 confirmPassword 字段的所有校验规则。

{
  validator: validateConfirmPassword,
  trigger: 'blur'
}

value: 当前表单项的值。在这个例子中，value 是用户在 confirmPassword 输入框中输入的值。
callback: 回调函数，用于返回校验结果。
- 如果校验通过，调用 callback()。
- 如果校验失败，调用 callback(new Error('错误信息'))，并传递错误信息。