Ant Form使用总结 —— 校验

正则校验

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

问题：

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

?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/im
       message : '不可包含特殊符号',
    }]}
>
    

方法校验

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

 ({
            validator(rule, value) {
               if ( value === getFieldValue( 'password' )) return Promise.resolve()
               return Promise.reject( '密码不一致' )
            }
       })
    }]}
>
    

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

FormInstance触发校验

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

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

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

  return (
      
        
            及格
            不及格
        
        

        
          
        
        
          
        
      
     
  )
}

自定义校验

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

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

官网体：

实例：

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 (
        
            
                success
                warning
                error
                validating
            
            

                
                    
                
            
        
    )
}