react antd的defaultValue数据通过不了非空校验,解决方案

在这里插入图片描述
在这里插入图片描述

解决方案

在这里插入图片描述

在使用React结合Ant Design(antd)时,进行输入框手机号和邮箱校验可以通过使用Ant Design提供的Form组件来实现。antd的Form组件提供了强大的表单验证功能,其中包括了对于手机号和邮箱的验证规则。下面是一个简单的示例,展示如何使用Form组件进行这两种校验: 首先,你需要安装并引入antd库到你的项目中: ```bash npm install antd --save ``` 然后在你的React组件中,可以这样使用Form组件进行校验: ```jsx import React from 'react'; import { Form, Input, Button, message } from 'antd'; import {手机号,邮箱} from 'antd/lib/validations/knownValidations'; const MyComponent = () => { const handleFormSubmit = (values) => { // 这里values包含了输入框中的数据,你可以进行进一步的处理 console.log(values); }; return ( <Form onFinish={handleFormSubmit}> <Form.Item name="phone" label="手机号" rules={[ { required: true, message: '请输入手机号!', }, { validator: (_, value) => { if (手机号.test(value)) { return Promise.resolve(); } return Promise.reject('手机号格式不正确'); }, }, ]} > <Input placeholder="请输入手机号" /> </Form.Item> <Form.Item name="email" label="邮箱" rules={[ { required: true, message: '请输入邮箱!', }, { type: 'email', message: '邮箱格式不正确!', }, ]} > <Input placeholder="请输入邮箱" /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> 提交 </Button> </Form.Item> </Form> ); }; export default MyComponent; ``` 在这个示例中,我们使用了`Form.Item`组件包裹`Input`组件,并定义了`rules`属性来进行校验。对于手机号,我们使用了自定义的正则表达式规则,并通过`validator`进行校验;对于邮箱,我们直接使用了`type: 'email'`的方式来进行校验。如果校验未通过,将会在对应的`Input`组件下方显示相应的提示信息。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值