前端表单校验

表单校验使用

Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。

校验规则

Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。

const rule = ref({
  字段名称: [
    // 校验用户输入的长度避免超长 0-255个字符 超长
    { validator: rule.overLength, trigger: "blur" },
    // 根据字段自动查询后台是否重复
    {
      validator: (rule: any, value: any, callback: any) => {
        validateExist(rule, value, callback, form.id !== "");
      },
      trigger: "blur",
    },
  ],
});

内置规则

系统内置了一系列常用的表单校验规则，可直接引入使用。

函数名称	函数作用
validateExist	根据字段自动查询后台是否重复
overLength	校验用户输入的长度避免超长，范围为 0-255 个字符
validatorNameCn	校验用户输入是否为中文、英文、数字包括下划线
validatorCapital	校验用户输入是否为大写英文、下划线
validatorLowercase	校验用户输入是否为小写英文、下划线
validatorLower	校验用户输入是否为小写英文
checkSpace	校验输入是否包含首尾空白字符
validatePhone	校验手机号的合法性
number	校验输入是否为数字
letter	校验输入是否为字母
letterAndNumber	校验输入是否为字母和数字
mobilePhone	校验输入是否为正确格式的手机号码
letterStartNumberIncluded	校验输入是否以字母开头，可包含数字
noChinese	校验输入是否包含中文字符
chinese	校验输入是否为中文字符
email	校验输入是否为正确格式的电子邮箱
url	校验输入是否为正确格式的 URL
regExp	校验输入是否符合给定的正则表达式

触发时机

建议在配置校验规则时，合理设置 trigger 属性。常用的触发时机包括 blur（失去焦点）和 change（值改变），选择合适的触发时机可以提升用户体验。

后台校验

validateExist 规则会自动调用后台接口检查字段是否重复，适用于用户名、编码等需要唯一性验证的场景。在编辑模式下，需要传入当前记录 ID 以排除自身。

本页目录

#前端表单校验

#表单校验使用

#内置规则

前端表单校验

表单校验使用

内置规则