Form组件自定义校验规则和多子项联合校验

antd 中的form组件提供了强大的数据校验和表单数据获取的功能，但是在面对各种场景下的需求，我们如何灵活运用antd组件库提供的各种方法来实现自己的需求，却是件困难的事情。
本文通过对表单项中包含多选和输入框两个输入介质的场景来介绍，antd的自定义校验规则、元素联合校验以及自己控制提示信息的展示的应用方式。

自定义校验规则

1. form.Item可以通过rule字段配置校验规则，常规用法：

// 设置为必填
<Form.Item
    label="邮箱"
    name="email"
    rules={[ { required: true, message: '请输入邮箱' }]}
>
	<input name="email" />
</Form.Item>

// 使用正则来校验
<Form.Item
    label="邮箱"
    name="email"
    rules={[ { pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, message: '请输入邮箱' }]}
>
	<input name="email" />
</Form.Item>

2. 使用validator函数来自定义校验规则，自定义方法返回一个promise对象，校验失败抛出提示信息

 <Form.Item name='typeInput' rules={[{
   	validator: onCheckType
   	}]}>
    <Row>
      <span className="tips">其他: </span>
      <input className={style['service-type']} maxLength={20} />
	</Row>
</Form.Item>
const [checkedList, setCheckedList] = useState<CheckboxValueType[]>([])
const onCheckType = (rule: any, value: string) => {
    return new Promise((resolve, reject) => {
      if (value) {
        resolve('');
      } else {
        if (checkedList.length === 0) {
          reject(new Error('请选择你的爱好'));
        }
        resolve('');
      }
    })
  }

表单项联合校验

使用form.validateFields()方法来实现校验规则联合调用，使用场景对表单里的所有输入都做响应式校验，一个输入所有都触发检验。

const [form] = Form.useForm()
const hobbyType = [{
	key: 'lanqiu',
	name: '篮球'
},
{
	key: 'wudao',
	name: '舞蹈'
},
{
	key: 'huaban',
	name: '滑板'
}
]
const [checkedList, setCheckedList] = useState<CheckboxValueType[]>([])
const onCheckType = (rule: any, value: string) => {
    return new Promise((resolve, reject) => {
      if (value) {
        resolve('');
      } else {
        if (checkedList.length === 0) {
          reject(new Error('请选择你的爱好'));
        }
        resolve('');
      }
    })
}
const onChange = (list: CheckboxValueType[]) => {
    setCheckedList(list);
    // 调用name为typeInput的Form.Item的校验规则
    form.validateFields(["typeInput"]);
}

<Form
  name="form"
  form={form}
>
  <Form.Item
     label="请填写你的爱好"
     required
  >
    <Checkbox.Group style={{ display: 'block' }} value={checkedList} onChange={onChange}>
        {
         hobbyType.map((hobby) => {
            return (
               <Row key={hobby.key}>
                   <Checkbox
                     value={hobby.key}
                     style={{
                         lineHeight: '32px',
                      }}
                     >
                        {hobby.name}
                     </Checkbox>
                 </Row>)})}
    </Checkbox.Group>
    <Form.Item name='typeInput' rules={[{
       validator: onCheckType
    }]}>
       		<Row>
         		<span className="tips">其他: </span>
          		<input maxLength={20} />
        	</Row>
		</Form.Item>
	</Form.Item>
</Form>

自定义校验的时机和内容

对validateStatus、help的使用

注意
这两个熟悉可以控制校验信息的状态改变，但是不会有校验拦截的实际作用
即使设置validateStatus为success也会显示help的值

 <Form.Item
      label="Validating"
      hasFeedback
      validateStatus="error"
      help="The information is being validated..."
 >
     <Input placeholder="I'm the content is being validated" id="validating" />
 </Form.Item>