📄 前端表单校验

表单校验使用

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

Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 校验规则参见 https://element-plus.org (opens new window)

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	校验输入是否符合给定的正则表达式