正则校验
使用item属性rules[]字段中pattern进行正则校验，可进行多正则验证不同message
问题：
- 多正则校验容易触发多报错，UI显示较为混乱
- 不支持异步
<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>
)
}
