简单介绍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.