Ant Form使用总结 —— 校验

正则校验

使用item属性rules[]字段中pattern进行正则校验，可进行多正则验证不同message

问题：

1. 多正则校验容易触发多报错，UI显示较为混乱
2. 不支持异步

<Form.Item
    rules={[{
       require : true,
       pattern : /^[^`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/im
       message : '不可包含特殊符号',
    }]}
>
    <Input />
</Form.Item>

方法校验

较为靠谱的一种校验方式，虽然是可以支持多方法的校验方式，基本一个方法就可以满足大多校验
支持异步

<Form.Item
    rules={[{
       ({ getFieldValue }) => ({
            validator(rule, value) {
               if ( value === getFieldValue( 'password' )) return Promise.resolve()
               return Promise.reject( '密码不一致' )
            }
       })
    }]}
>
    <Input />
</Form.Item>

问题：普通情况每次输入都会校验，如有接口请求需使用截流

FormInstance触发校验

随时随地触发校验的方法
可以在当前字段触发其他字段或整表校验的方法

import { Form , Select, Layout , Input } from 'antd'

export default () => {
  const [ form ] = Form.useForm()
  const handleChange = ( val ) => {
    form.validateFields(['score']) //校验方法
  }

  return (
      <Layout.Content>
        <Select onChange={ handleChange }>
            <Select.Option value="1">及格</Select.Option>
            <Select.Option value="2">不及格</Select.Option>
        </Select>
        <Form form={ form }>
        <Form.Item name="class" lable="班级">
          <Input />
        </Form.Item>
        <Form.Item 
          name="score" 
          lable="分数" 
          rules={[{
            require : true,
            message : "请输入考试得分"
          }]}
        >
          <Input />
        </Form.Item>
      </Form>
     </Layout.Content>
  )
}

自定义校验

validateStatus help hasFeedback 等属性，你可以不通过 Form 自己定义校验的时机和内容。

• validateStatus: 校验状态，可选 'success', 'warning', 'error', 'validating'。
• hasFeedback：用于给输入框添加反馈图标。
• help：设置校验文案。

官网体：

<Form.Item label="Success" hasFeedback validateStatus="success">
      <InputNumber style={{ width: '100%' }} />
</Form.Item>

实例：

import React, { useCallback } from 'react'
import { Form , Layout, Select , InputNumber } from 'antd'

const CustomValidateForm = props => {
    const [ validateStatus , setValidateStatus ] = useState( 'success' )
    const [ form ] = Form.useForm()

    const handleValidateMessageChange = useCallback(
        val => {
            setValidateStatus( val )
        } , []
    )

    return (
        <Layout>
            <Select 
                value={ validateStatus }
                onChange={ handleValidateMessageChange }
            >
                <Select.Option value={ "success" }>success</Select.Option>
                <Select.Option value={ "warning" }>warning</Select.Option>
                <Select.Option value={ "error" }>error</Select.Option>
                <Select.Option value={ "validating" }>validating</Select.Option>
            </Select>
            <Form
                form={ form }
            >
                <Form.Item 
                    label="Success" 
                    hasFeedback 
                    validateStatus={ validateStatus }
                >
                    <InputNumber style={{ width: '100%' }} />
                </Form.Item>
            </Form>
        </Layout>
    )
}