下面是 Ant Design React 系列下的解释:
解释:( 其中 message 是所有文字的配置字段 )
1. enum 具体事例
类型:string 或 number
描述:字段值的枚举类型,指定字段值必须是枚举数组中的某一个。
<Form.Item
label="性别"
name="gender"
rules={[
{
enum: ['male', 'female'],
message: '请选择正确的性别!',
},
]}
>
<Radio.Group>
<Radio value="male">男</Radio>
<Radio value="female">女</Radio>
<Radio value="moth">鬼子</Radio>
</Radio.Group>
</Form.Item>
2. len 具体事例
类型:number
描述:字段值的长度(仅对字符串类型有效)。
<Form.Item
label="密码(长度)"
name="passwordLength"
rules={[
{ required: true, len: 8, message: '密码长度必须是8个字符!' },
]}
>
<Input.Password />
</Form.Item>
3. min(最小长度) 和 max(最大长度) 具体事例( 字符串 与 数字 )
类型:number
描述:用于字符串和数字类型的字段,表示字段值的最小和最大长度或值。
// 字符串
<Form.Item
label="密码"
name="password"
rules={[
{ required: true, message: '请输入密码!' },
{ min: 6, message: '密码至少6个字符!' },
{ max: 16, message: '密码最多16个字符!' },
]}
>
<Input.Password />
</Form.Item>
// 数字
<Form.Item
label="年龄"
name="age"
rules={[
{ type: 'number', min: 0, max: 150, message: '年龄应在0-150之间!' },
]}
>
<InputNumber />
</Form.Item>
4. pattern 正则表达式校验 具体事例
类型:RegExp
描述:用于字符串类型的字段,指定字段值的格式。
<Form.Item
label="手机号"
name="phone"
rules={[
{
pattern: /^1[3-9]\d{9}$/,
message: '请输入正确的手机号!',
},
]}
>
<Input />
</Form.Item>
5. required 是否必选 具体事例
类型:boolean
描述:是否必填。
<Form.Item
label="用户名"
name="username"
rules={[{ required: true, message: '请输入用户名!' }]}
>
<Input />
</Form.Item>
6. transform 校验前转换字段值 具体事例
类型:function(value: any) => any
描述:在验证之前对字段的值进行转换。
<Form.Item
label="年龄(转换)"
name="ageTransformed"
rules={[
{
required: true,
transform: (value) => Number(value), // 将字符串转换为数字
type: 'number',
min: 0,
max: 150,
message: '请输入有效的年龄!',
},
]}
>
<Input />
</Form.Item>
7. type 内建校验类型 具体事例
类型:string
描述:字段值的类型,例如 'email'、'url' 等,会进行对应的格式校验。
Indicates the type
of validator to use. Recognised type values are:
指示要使用的验证器的type
。识别的类型值为:
string
: Must be of typestring
.This is the default type.
string
:必须是类型string
。This is the default type.
number
: Must be of typenumber
.number
:必须是类型number
。boolean
: Must be of typeboolean
.boolean
:必须是类型boolean
。method
: Must be of typefunction
.method
:必须是类型function
。regexp
: Must be an instance ofRegExp
or a string that does not generate an exception when creating a newRegExp
.regexp
:必须是RegExp
的实例,或者是在创建新的RegExp
时不会生成异常的字符串。integer
: Must be of typenumber
and an integer.integer
:必须是类型number
和一个整数。float
: Must be of typenumber
and a floating point number.float
:必须是类型number
和浮点数。array
: Must be an array as determined byArray.isArray
.array
:必须是由Array.isArray
确定的数组。object
: Must be of typeobject
and notArray.isArray
.object
:必须是object
类型,而不是Array.isArray
类型。enum
: Value must exist in theenum
.enum
:值必须存在于enum
中。date
: Value must be valid as determined byDate
date
:值必须有效,由Date
确定url
: Must be of typeurl
.url
:必须是类型url
。hex
: Must be of typehex
.hex
:必须是类型hex
。email
: Must be of typeemail
.email
:必须是类型email
。any
: Can be any type.any
:可以是任何类型。
<Form.Item
label="邮箱"
name="emailTyped"
rules={[
{ type: 'email', message: '请输入正确的邮箱地址!' },
]}
>
<Input />
</Form.Item>
8. validator 自定义校验 具体事例
类型:function(rule: Rule, value: any, callback: Function)
描述:自定义验证函数,返回 Promise 或直接调用 callback 进行验证结果处理。
<Form.Item
name="custom"
rules={[
{
validator(_, value) {
if (value === 'forbidden') {
return Promise.reject(new Error('该值被禁止!'));
}
return Promise.resolve();
},
},
]}
>
<Input />
</Form.Item>
9. validator 自定义校验 具体事例
类型:boolean
描述:是否校验空格,默认为 true
,即如果值为纯空格,则校验不通过。
<Form.Item
label="描述"
name="description"
rules={[
{ required: true, whitespace: false, message: '描述不能为空或纯空格!' },
]}
>
<TextArea />
</Form.Item>