react+Antd表单用Form.Item互相校验_antd + vue循环form-item的校验并在其中一项给值后清除另一项的校验

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: [] }
          ]
        )
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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>
1
2
3
4
5
6
7