简单介绍FormItem的rules

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战

在使用antd的Form表单组件时，我们会遇到一些规则，今天我们学习一Form.Item的rule规则。

Rule

Rule 支持接收 object 进行配置，也支持 function 来动态获取 form 的数据：

type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);

先来看一下rule的一些参数

名称	说明	类型
defaultField	仅在 `type` 为 `array` 类型时有效，用于指定数组元素的校验规则	rule
enum	是否匹配枚举中的值（需要将 `type` 设置为 `enum`）	any[]
fields	仅在 `type` 为 `array` 或 `object` 类型时有效，用于指定子元素的校验规则	Record<string, rule>
len	string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度	number
max	必须设置 `type`：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度	number
message	错误信息，不设置时会通过模板自动生成	string
min	必须设置 `type`：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度	number
pattern	正则表达式匹配	RegExp
required	是否为必选字段	boolean
transform	将字段值转换成目标值后进行校验	(value) => any
type	类型，常见有 `string`	`number`	`boolean`	`url`	`email`。更多请参考此处	string
validateTrigger	设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集	string	string[]
validator	自定义校验，接收 Promise 作为返回值。示例参考	(rule, value) => Promise
whitespace	如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效	boolean

结合我们使用的例子来看：

<Form.Item
  name='number'
  label={'整数'}
  rules={[
    {
    validator: (_, value) =>
        value && value >= 0 && value <= 1000
             ? Promise.resolve()
             : Promise.reject(new Error('输入不合法，请输入0-1000之间的整数')),
      },
    ]}
 >
    <InputNumber></InputNumber>
</Form.Item>
//我们可以通过validator属性来自定义自己的校验规则。

 <Form.Item
     label={''}
     name={item.name}
     rules={[{ type: 'object', required: isEqual(item.agent_permission, 1) }]}
>
   <DatePicker
       allowClear
       placeholder={item.title}
       onBlur={() => {
           this.fieldSave(item.name, 'date');
       }}
       disabled={isEqual(item.agent_permission, 3)}
   />
</Form.Item>
//required校验字段是否必填。
//type规定字段的类型

Type类型

Indicates the type of validator to use. Recognised type values are:

string: Must be of type string. This is the default type.
number: Must be of type number.
boolean: Must be of type boolean.
method: Must be of type function.
regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
integer: Must be of type number and an integer.
float: Must be of type number and a floating point number.
array: Must be an array as determined by Array.isArray.
object: Must be of type object and not Array.isArray.
enum: Value must exist in the enum.
date: Value must be valid as determined by Date
url: Must be of type url.
hex: Must be of type hex.
email: Must be of type email.
any: Can be any type.