📄 前端表单校验
内部资料，请刷新扫码登录
pigcloud
# 表单校验使用
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", }, ], });Copied!
# 内置规则
| 函数名称 | 函数作用 |
|---|---|
| validateExist | 根据字段自动查询后台是否重复 |
| overLength | 校验用户输入的长度避免超长，范围为 0-255 个字符 |
| validatorNameCn | 校验用户输入是否为中文、英文、数字包括下划线 |
| validatorCapital | 校验用户输入是否为大写英文、下划线 |
| validatorLowercase | 校验用户输入是否为小写英文、下划线 |
| validatorLower | 校验用户输入是否为小写英文 |
| checkSpace | 校验输入是否包含首尾空白字符 |
| validatePhone | 校验手机号的合法性 |
| number | 校验输入是否为数字 |
| letter | 校验输入是否为字母 |
| letterAndNumber | 校验输入是否为字母和数字 |
| mobilePhone | 校验输入是否为正确格式的手机号码 |
| letterStartNumberIncluded | 校验输入是否以字母开头，可包含数字 |
| noChinese | 校验输入是否包含中文字符 |
| chinese | 校验输入是否为中文字符 |
| 校验输入是否为正确格式的电子邮箱 | |
| url | 校验输入是否为正确格式的 URL |
| regExp | 校验输入是否符合给定的正则表达式 |
