react ant-desian实现表单校验

船长在船上

已于 2022-08-04 18:36:24 修改

阅读量1.5k

点赞数 2

分类专栏： react 前端开发文章标签： react.js 前端

于 2022-06-11 10:53:28 首次发布

本文链接：https://blog.csdn.net/SmartJunTao/article/details/125232296

版权

前端开发同时被 2 个专栏收录

139 篇文章 7 订阅

订阅专栏

react

42 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Ant Design的Form组件进行表单验证，包括设置`validateTrigger`属性来控制验证时机，添加`name`属性使校验生效，以及通过`rules`属性定义验证规则，确保手机号和验证码的有效性。

摘要由CSDN通过智能技术生成

闲暇之余不忘学习，提升自己，知识在于积累，更是一笔财富。

看完文章，感谢各位支持一下呗！

实现步骤

为 Form 组件添加 validateTrigger 属性，指定校验触发时机的集合
为 Form.Item 组件添加 name 属性，这样表单校验才会生效
为 Form.Item 组件添加 rules 属性，用来添加表单校验

代码实现

page/Login/index.js

const Login = () => {
  return (
    <Form validateTrigger={['onBlur', 'onChange']}>
      <Form.Item
        name="mobile"
        rules={[
{
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号码格式不对',
            validateTrigger: 'onBlur'
},
{ required: true, message: '请输入手机号' }
]}
>
        <Input size="large" placeholder="请输入手机号" />
      </Form.Item>
      <Form.Item
        name="code"
        rules={[
{ len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
{ required: true, message: '请输入验证码' }
]}
>
        <Input size="large" placeholder="请输入验证码" maxLength={6} />
      </Form.Item>
      <Form.Item name="remember" valuePropName="checked">
        <Checkbox className="login-checkbox-label">
我已阅读并同意「用户协议」和「隐私条款」
        </Checkbox>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" size="large" block>
登录
        </Button>
      </Form.Item>
    </Form>
)
}