React Ant form 自定义校验规则问题总结_react antd form自定义校验规则

作者：从前慢现在也慢 | 2024-07-18 12:04:26

踩

react antd form自定义校验规则

React Ant form 自定义校验规则问题总结

官网给出的例子很简单

		 <Form  form={form} onFinish={onFinish} onFinishFailed={onFinishFailed}>
               <Form.Item
                  label="用户名"
                  name="username"
                  rules={[
                    {
                      required: true,
                      message: '请输入用户名',
                    },
                  ]} 
                  >
                  <Input placeholder="Select a option and change input text above"/>
                </Form.Item>
              <Button type="primary" htmlType="submit">登录</Button>
              <Button htmlType="button" type="dashed" onClick={onReset}>重值					</Button>
            </ Form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

从中我们不难看出rules是一个数组对象的格式，同时也是我们自定义规则的地方，就拿简单的来讲，如果注册界面中我们要验证手机号的规则怎么做，其实也很简单，就需要我们自己来定义规则了

在官方文档中我们可以看到有一个pattern，和validator这样两个的属性（文章重点）

名称	说明	类型
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`
validateTrigger	设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集	string \| string[]
validator	自定义校验，接收 Promise 作为返回值。示例参考	(rule, value) => Promise
warningOnly	仅警告，不阻塞表单提交	boolean
whitespace	如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效	boolean

知道了这两个属行，接下来当然是实践了，如有不懂的或者想看更多from表单的请点击声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】