1.使用getFieldDecorator的rules規則

最簡單的方法就是使用getFieldDecorator中的rules驗證。rules中定義校驗規則，message為校驗不通過時的提示文字。

{getFieldDecorator('inputContent', {rules: [{required: true, message: '請輸入內容!',}],})(<Input /> )}

?

• rules校驗規則

參數說明類型默認值

enum	枚舉類型	string	-
len	字段長度	number	-
max	最大長度	number	-
message	校驗文案	string	ReactNode	?
min	最小長度	number	-
pattern	正則表達式校驗	RegExp	-
required	是否必選	boolean	false
transform	校驗前轉換字段值	function(value) => transformedValue:any	-
type	內建校驗類型，可選項	string	'string'
validator	自定義校驗（注意，callback 必須被調用）	function(rule, value, callback)	-
whitespace	必選時，空格是否會被視為錯誤	boolean	false

更多高級用法可研究?async-validator。

2.使用getFieldDecorator的validator自定義校驗

validator可以自定義校驗規則，適用于無法用rules校驗規則校驗的情況，比如校驗再次輸入密碼與前一次輸入的密碼是否相同。其中，參數val為輸入的值，callback必須被調用，是校驗失敗時的回調，內容為提示文字。

handleValidator = (rule, val, callback) => {if (!val) {callback();}let validateResult = ...; // 自定義規則if (!validateResult) {callback('請輸入正確的內容！');}callback();} {getFieldDecorator('validator', {rules: [{required: true,message: '請輸入內容'}, {validator: this.handleValidator}] })(<input /> )}

• 注意：一個 Form.Item 建議只放一個被 getFieldDecorator 裝飾過的 child，當有多個被裝飾過的 child 時，help required validateStatus 無法自動生成。此時可用下面一種方法校驗。

3.使用validateStatus自定義校驗

antd提供了validateStatus，help，hasFeedback 等屬性，你可以不需要使用 Form.create 和 getFieldDecorator，自己定義校驗的時機和內容。

• validateStatus: 校驗狀態，可選 'success', 'warning', 'error', 'validating'。
• hasFeedback：用于給輸入框添加反饋圖標。
• help：設置校驗文案。

<FormItem{...formItemLayout}label="Success"hasFeedbackvalidateStatus="success"><Input placeholder="I'm the content" id="success" /> </FormItem><FormItem{...formItemLayout}label="Warning"hasFeedbackvalidateStatus="warning"><Input placeholder="Warning" id="warning" /> </FormItem><FormItem{...formItemLayout}label="Fail"hasFeedbackvalidateStatus="error"help="Should be combination of numbers & alphabets"><Input placeholder="unavailable choice" id="error" /> </FormItem>

• 可用屬性

參數說明類型默認值

colon	配合 label 屬性使用，表示是否顯示 label 后面的冒號	boolean	true
extra	額外的提示信息，和 help 類似，當需要錯誤信息和提示文案同時出現時，可以使用這個。	string	ReactNode	?
hasFeedback	配合 validateStatus 屬性使用，展示校驗狀態圖標，建議只配合 Input 組件使用	boolean	false
help	提示信息，如不設置，則會根據校驗規則自動生成	string	ReactNode	?
label	label 標簽的文本	string	ReactNode	?
labelCol	label 標簽布局，同?<Col>組件，設置?span``offset值，如?{span: 3, offset: 12}或?sm: {span: 3, offset: 12}	object	?
required	是否必填，如不設置，則會根據校驗規則自動生成	boolean	false
validateStatus	校驗狀態，如不設置，則會根據校驗規則自動生成，可選：'success' 'warning' 'error' 'validating'	string	?
wrapperCol	需要為輸入控件設置布局樣式時，使用該屬性，用法同 labelCol	object

• 注意： 這種校驗方法有一個不足之處，就是不使用getFieldDecorator的話沒辦法設置字段名，獲取輸入的值的時候不能用getFieldsValue和setFieldsValue等方法對表單進行賦值和取值。

參考

https://ant.design/components/form-cn/#components-form-demo-dynamic-rule

轉載于:https://www.cnblogs.com/chaoxiZ/p/10136780.html

總結

以上是生活随笔為你收集整理的AntDesign Form表单字段校验的三种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。