我們在上一章回中介紹了Form Widget相關(guān)的內(nèi)容，本章回中將介紹Form系列組件的驗(yàn)證與提交功能.閑話休提，讓我們一起Talk Flutter吧。

1. 概念介紹

我們在這里說的的驗(yàn)證功能與提交功能是指對Form組件中的內(nèi)容進(jìn)行驗(yàn)證和提交，它不像TextField一樣對單個(gè)組件進(jìn)行驗(yàn)證同，而是對Form組件中的所有組件進(jìn)行統(tǒng)
一的驗(yàn)證與提交。這也是我們使用Form組件最大的優(yōu)點(diǎn)。

2 使用方法

整體的思路：先在Form的子組件中實(shí)現(xiàn)驗(yàn)證方法和數(shù)據(jù)保存方法，也就是給子組件(通常是TextFormField組件)的validator和onSaved屬性賦值；然后統(tǒng)一進(jìn)行
驗(yàn)證數(shù)據(jù)的合法性并且對數(shù)據(jù)進(jìn)行保存，這個(gè)操作由FormState對象方來完成。
FormState是Form的State類，主要用來對Form中的所有FormField進(jìn)行統(tǒng)一操作，比如保存數(shù)據(jù)的操作。我們可以通過Form.of()或者GlobalKey獲取該類型
的對象。該類型提供了相關(guān)的方法對數(shù)據(jù)進(jìn)行統(tǒng)一操作，下面是這些方法的詳細(xì)內(nèi)容：

• validate()方法：主要用來驗(yàn)證數(shù)據(jù)的合法性；
• save()方法：主要用來保存數(shù)據(jù)；
• reset()方法：主要用來重置數(shù)據(jù)；

3 代碼與效果

3.1 示例代碼

final formKey = GlobalKey<FormState>();
AutovalidateMode _autoValidate = AutovalidateMode.disabled;
String? _name = "Default Name";
String? _pwd = "Default Pwd";//驗(yàn)證和提交和方法，雖然只驗(yàn)證和提交一次，但是它會回調(diào)Form中所有子組件的驗(yàn)證和提交方法。
//相當(dāng)于一次對所有的輸入內(nèi)容進(jìn)行了驗(yàn)證和提交。
void loginWithForm() {//合法性驗(yàn)證成功則保存數(shù)據(jù),否則打開自動驗(yàn)證功能，這樣在用戶輸入后會自動關(guān)閉錯(cuò)誤提示，這種體驗(yàn)比較好if (formKey.currentState!.validate()) {// _autoValidate = AutovalidateMode.disabled;//它會回調(diào)TextFormFiled中的onSave方法formKey.currentState?.save();} else {setState(() {_autoValidate = AutovalidateMode.always;});}//它會回調(diào)validator對應(yīng)的回方法，成功返回true,錯(cuò)誤返回錯(cuò)誤信息（在驗(yàn)證方法中），顯示在helperText位置// formKey.currentState?.validate();debugPrint("login clicked");
}

上面的代碼中我們主要演示了如何獲取FormState對象，并且通過該對象來調(diào)用數(shù)據(jù)驗(yàn)證和保存方法。此外，該對象需要賦值給Form組件的key屬性才有效果。詳細(xì)內(nèi)容
可以參考上一章回中的示例代碼，Form子組件中的數(shù)據(jù)驗(yàn)證和保存方法也在上一章回的示例代碼中。FormState對象不會自動去驗(yàn)證和保存數(shù)據(jù)，我們把該對象的操作封
裝成一個(gè)方法，也就是代碼中的loginWithForm()方法，然后把該方法賦值給Button的onPress屬性，最后把Button組件和Form組件放到同一頁面上，點(diǎn)擊Button
時(shí)就會調(diào)用loginWithForm()方法去驗(yàn)證和保存Form組件中的數(shù)據(jù)，下面是Button的示例代碼：

Container(width: double.infinity,height: 56.0,child: ElevatedButton(onPressed: () => loginWithForm(),child: Text("Login"),),
),

3.2 運(yùn)行效果

下面是程序的運(yùn)行效果圖，請大家參考：

4. 經(jīng)驗(yàn)分享

下面分享一些我在驗(yàn)證數(shù)據(jù)合法性方法的經(jīng)驗(yàn):在Form組件的子組件TextFormField中不要打開自動驗(yàn)證功能(默認(rèn)關(guān)閉），當(dāng)驗(yàn)證錯(cuò)誤時(shí)再打開自動驗(yàn)證功能，示例代
碼可以參考上一小節(jié)中l(wèi)oginWithForm()方法內(nèi)SetState相關(guān)的代碼。這樣做的好處有以下幾點(diǎn)：- 只有主動點(diǎn)擊按鈕時(shí)才會驗(yàn)證數(shù)據(jù)的合法性； - 如果打開自動驗(yàn)
證會顯示helpText中的內(nèi)容，會讓人以為是錯(cuò)誤了； - 在驗(yàn)證出錯(cuò)后再開啟自動驗(yàn)證，輸入正確后就會讓helpText中的錯(cuò)誤內(nèi)容消失，因?yàn)镕orm中包含多個(gè)子組件，
一個(gè)子組件的錯(cuò)誤提示內(nèi)容消失后不會影響其它子組件；下面是驗(yàn)證合法性的示例代碼，請大家參考：

//返回有內(nèi)容時(shí)會顯示在help位置，而且邊框顏色變成紅色，返回為Null時(shí)不會顯示出來
String? _validateName(String? n) {if (n!.isEmpty)return "name is empty";elsereturn null;
}

我們把驗(yàn)證數(shù)據(jù)合法性的代碼封裝成了一個(gè)方法，把該方法賦值給TextFormField組件的validator屬性后就可以使用了。上面的代碼只驗(yàn)證了輸入內(nèi)容是否為空，大
家可以依據(jù)項(xiàng)目的需求來做其它的驗(yàn)證，比如輸入內(nèi)容是否為郵件格式等。注意：只有驗(yàn)證不合法時(shí)才返回文字內(nèi)容，驗(yàn)證合法時(shí)返回空對象，因?yàn)檫@里返回的文字內(nèi)容會
顯示在TextFormField組件的helpText位置。關(guān)于經(jīng)驗(yàn)分享中的內(nèi)容，我建議大家自己動手實(shí)踐，因?yàn)檫@部分內(nèi)容是動態(tài)的，需要實(shí)際操作才能體會到它的好處，
此外，大家可以調(diào)整錯(cuò)誤提示文字的顏色，以及TextFormField組件獲取焦點(diǎn)后的顏色，我把這樣內(nèi)容添加到了代碼的注釋中，大家可以參考注釋進(jìn)行調(diào)整。
看官們，關(guān)于"Form系列組件的驗(yàn)證與提交功能"相關(guān)的內(nèi)容就介紹到這里，歡迎大家在評論區(qū)交流與討論!