React Ant form 自定义校验规则以及正则校验

最新推荐文章于 2024-04-28 10:31:14 发布

小萝卜-

最新推荐文章于 2024-04-28 10:31:14 发布

阅读量990

点赞数

文章标签：前端 javascript html Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_66709443/article/details/129021609

版权

<Form.Item
  label="分类名称"
  name="name"
  rules={[
    {required: true, message: '请输入分类名称'},
    {
      validator: (_, value) => {
        return value.length > 20 ? Promise.reject('分类名称不能超过20个字符') : Promise.resolve();
      }
    },
  ]}
>
  <Input maxLength={20} placeholder="分类名称"/>
</Form.Item>

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

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

正则校验

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