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

表单中有两项:手机号和邮箱号,初始化都是必填,如果填了其中一项,则另一项为非必填,而且两项都各自有自己的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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Antd是一个基于React开发的UI组件库,提供了一系列美观、易用的组件,能够帮助我们快速构建前端界面。而一个完整的后台项目框架首先需要具备以下几个方面的内容: 1. 路由管理:一个后台项目通常会有很多不同的页面,因此需要一个路由管理器来管理不同页面之间的切换。React Antd提供了React Router库来实现路由管理,我们可以通过配置路由信息来指定每个页面对应的路径,帮助我们实现页面间的跳转。 2. 权限管理:后台项目通常会有一些权限控制的需求,比如某些用户只能访问特定的页面或者执行特定的操作。React Antd提供了权限管理相关的组件,如Menu、Button等,我们可以根据不同的用户角色显示或隐藏某些功能。 3. 状态管理:一个完整的后台项目通常会有很多需要共享的状态,比如用户信息、页面数据等。React Antd本身并不提供状态管理解决方案,但可以与Redux、Mobx等状态管理工具配合使用,帮助我们管理全局的状态数据。 4. 表单验证:后台项目中经常需要进行表单验证,以确保用户输入的数据符合要求。React Antd提供了Form组件,可以方便地实现表单验证功能,如必填项校验、数据格式校验等。 5. 数据交互:后台项目通常需要与后端进行数据交互,如获取用户信息、提交表单数据等。React Antd并没有提供专门的数据交互解决方案,通常我们可以使用Axios等第三方库来实现数据的请求和响应。 综上所述,React Antd提供了一套美观、易用的UI组件,可以帮助我们快速构建后台项目。但在构建一个完整的后台项目框架时,我们还需要根据项目的具体需求,结合以上提到的几个方面来进行完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值