前端表单校验

前端表单校验

PIGCLOUD

📄 前端表单校验 _ PIGCLOUD

](https://www.pig4cloud.com/)

产品

商业版

生态🔥

📄 前端表单校验

pigcloud

# 表单校验使用

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 校验输入是否为中文字符
email 校验输入是否为正确格式的电子邮箱
url 校验输入是否为正确格式的 URL
regExp 校验输入是否符合给定的正则表达式

📄 前端标签列表组件 📄 基础工具类库使用

  • 标题: 前端表单校验
  • 作者: PIGCLOUD
  • 创建于 : 2024-01-01 00:00:00
  • 更新于 : 2025-09-22 14:27:28
  • 链接: https://anime-blog.52lin.site/📄 前端表单校验 _ PIGCLOUD/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。