表单中有两项:手机号和邮箱号,初始化都是必填,如果填了其中一项,则另一项为非必填,而且两项都各自有自己的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>
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐