react+Antd表单用Form.Item互相校验
表单中的两项需要互相校验,在这里记录下解决办法
参考了这个博主的文章:https://blog.csdn.net/huanhuan03/article/details/116798663,并做了自己的逻辑:
函数体:
const [mobileRequired, setmobileRequired] = useState(true)
const [emailRequired, setemailRequired] = useState(true)
const monileEmailOnchange = (e, val) => {
if (val == 'M') {
console.log(form, 'email')
e.target.value && e.target.value != '' ? setemailRequired(false) : setemailRequired(true)
console.log(emailRequired, 'emailRequired')
if (emailRequired) {
form.setFields(
[
// { name: '表单字段name', value: '需要设置的值', errors: ['错误信息'] }, 当 errors 为非空数组时,表单项呈现红色,
{ name: 'email', errors: [] }
]
)
}
} else {
e.target.value && e.target.value != '' ? setmobileRequired(false) : setmobileRequired(true)
if (mobileRequired) {
form.setFields(
[
// { name: '表单字段name', value: '需要设置的值', errors: ['错误信息'] }, 当 errors 为非空数组时,表单项呈现红色,
{ name: 'mobile', errors: [] }
]
)
}
}
}
dom渲染:
<Form.Item rules={[
{required: mobileRequired,transform: (value) => value&&value.trim() , message: '请输入'},]} name='mobile' label='电话'>
<Input maxLength={20} placeholder='(852)' onChange={e => monileEmailOnchange(e, 'M')} />
</Form.Item>
<Form.Item rules={[{required: emailRequired, message: '请输入'}]} name='email' label='email'>
<Input maxLength={40} onChange={e => monileEmailOnchange(e, 'E')} />
</Form.Item>