react+Antd表单用Form.Item互相校验

太过爱你忘了你带给我的痛 2023-01-21 05:24 28阅读 0赞

> 表单中有两项：手机号和邮箱号，初始化都是必填，如果填了其中一项，则另一项为非必填，而且两项都各自有自己的rules校验规则，举例：在填了手机号后，邮箱号为非必填，但是又清空了手机号，去填邮箱号，这时两项又都为必填项，这时你要清掉手机号的错误提示。

需求大概如上，实现第一步，其中一个填了之后另一个为非必填，两个都清空了则都为必填，实现第二步，当前项change后，清掉另一个的错误提示：

const [mobileRequired, setmobileRequired] = useState(true)
    const [emailRequired, setemailRequired] = useState(true)
        
    const monileEmailOnchange = (e, val) => {
            if (val == 'M') {
                e.target.value && e.target.value != '' ? (setemailRequired(false), sectionThr.current.setFields([{name: 'email', errors: []}])) : setemailRequired(true)
            } else {
                e.target.value && e.target.value != '' ? (setmobileRequired(false), sectionThr.current.setFields([{name: 'mobile', errors: []}])) : setmobileRequired(true)
            }
    }
    
    <Form.Item rules={[
                        {required: mobileRequired,transform: (value) => value&&value.trim() , message: '请输入'},
                        {pattern: /^[0-9]{0,}$/, message: '请输入'}
           ]} name='mobile' label={}>
           <Input maxLength={20} placeholder='(852)' onChange={e => monileEmailOnchange(e, 'M')} />
    </Form.Item>
    <Form.Item rules={[{required: emailRequired, pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '请输入'}]} name='email' label={}>
           <Input maxLength={40}  onChange={e => monileEmailOnchange(e, 'E')} />
    </Form.Item>

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关 react+Antd表单用Form.Item互相校验

> 表单中有两项：手机号和邮箱号，初始化都是必填，如果填了其中一项，则另一项为非必填，而且两项都各自有自己的rules校验规则，举例：在填了手机号后，邮箱号为非必填，但是又清空

太过爱你忘了你带给我的痛/ 2023年01月21日 05:24/ 0 赞/ 29 阅读

相关 element-ui自定义表单校验规则及常用表单校验

前言表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。

妖狐艹你老母/ 2022年12月11日 07:58/ 0 赞/ 508 阅读

相关 springBoot进行表单校验

一、前言在进行表单提交时，一般会对参数进行校验，及时返回给用户进行提示，使用户能够正确输入。二、所需依赖包这里用的是 SpringBoot 配置项目，本文讲

亦凉/ 2022年12月04日 01:04/ 0 赞/ 367 阅读

相关表单校验

select chargeType: [ { required: true, message: "请选择计费方式", trigger

女爷i/ 2022年11月14日 15:58/ 0 赞/ 378 阅读

相关 VUE表单校验，金额

rules: { money: [ { required: true, message: '请输入金额', trig

灰太狼/ 2022年09月08日 03:46/ 0 赞/ 372 阅读

相关 SPring MVC 表单校验

假设我们现在有一个需要进行验证的实体类User，其代码如下所示： Java代码 ![收藏代码][icon_star.png] 1. public class Use

心已赠人/ 2022年08月02日 01:26/ 0 赞/ 336 阅读

相关 Spring MVC 校验表单

1. 引言 2. 校验注解 3. 在控制器中验证对象 4. 需要的包 1. 引言从Spring 3.0开始，Sp

超、凢脫俗/ 2022年05月18日 01:38/ 0 赞/ 373 阅读

相关 JavaScript表单校验(checkItem)

JavaScript表单校验 CharType,表单数据类型 "C" 为字符串，"N" 为数字,"D"为日期类型。 MaxLength(最大长度) 整型

向右看齐/ 2022年05月17日 09:13/ 0 赞/ 380 阅读

相关表单校验

表单数据提交后，在服务器端编程校验数据合法性，是一个很常见的需求。所以struts的ActionServlet在把数据封装到formbean后，会自动调用formbean

青旅半醒/ 2022年05月15日 03:51/ 0 赞/ 463 阅读

相关 jQuery-表单校验

为什么要表单验证 1.减轻服务器的压力 2.保证输入的数据符合要求 ![70][] 常用的表单验证 1. 日期格式 2. 表单元素是否为空

末蓝、/ 2022年05月12日 08:36/ 0 赞/ 539 阅读