React Ant 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>

从中我们不难看出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表单的请点击👉Ant design “官网”

 			<Form  form={form} onFinish={onFinish} onFinishFailed={onFinishFailed}>
               <Form.Item
                  label="用户名"
                  name="username"
                  rules={[
                          {
                            pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                            validator: (rule, value) =>{
                            return rule.pattern.test(value) ? Promise.resolve() : value ? Promise.reject(new Error('提示错误消息')) : 									Promise.reject(new Error('提示消息不能为空'))
                              },
                          }
                        ]}
                        >
                  <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>

validator接受两个参数的值，一个值rule,是你当前定义的rules上的属性和方法以及你定义的规则，另一个值为当前from表单中value，且返回值必须为Promise

这样我们的要求就完成了，当你from表单中什么都没有时提示您的消息为空，如果不为空，但你的输入的不符合RegExp，则会提示您消息错误，知道你输入合法

字符，希望本文章就够帮到您！