資訊專欄INFORMATION COLUMN
摘要：如果想要屏蔽瀏覽器對(duì)表單的默認(rèn)驗(yàn)證行為，可以在表單元素上添加標(biāo)記。如果未修改，值為，如果修改過(guò)值為修改過(guò)的表單只要用戶修改過(guò)表單，無(wú)論輸入是否通過(guò)驗(yàn)證，該值都返回合法的表單這個(gè)布爾型的屬性用來(lái)判斷表單的內(nèi)容是否合法。
借助AngularJS，我們不需要花太多額外的精力就可以輕松實(shí)現(xiàn)客戶端表單驗(yàn)證功能。雖然 Web應(yīng)用安全不能完全依賴客戶端驗(yàn)證，但客戶端驗(yàn)證可以提供表單狀態(tài)的實(shí)時(shí)反饋。
要使用表單驗(yàn)證，首先要確保表單有一個(gè)name屬性。
所有輸入字段都可以進(jìn)行基本的驗(yàn)證，比如最大、最小長(zhǎng)度等。這些功能是由新的HTML5 表單屬性提供的。
如果想要屏蔽瀏覽器對(duì)表單的默認(rèn)驗(yàn)證行為，可以在表單元素上添加novalidate標(biāo)記。
下面看一下可以在input元素上使用的所有驗(yàn)證選項(xiàng)。
必填項(xiàng)
驗(yàn)證某個(gè)表單輸入是否已填寫，只要在輸入字段元素上添加HTML5標(biāo)記required即可：
最小長(zhǎng)度
驗(yàn)證表單輸入的文本長(zhǎng)度是否大于某個(gè)最小值，在輸入字段上使用AngularJS指令ng-minleng= "{number}"：
最大長(zhǎng)度
驗(yàn)證表單輸入的文本長(zhǎng)度是否小于或等于某個(gè)最大值，在輸入字段上使用AngularJS指令 ng-maxlength="{number}"：
模式匹配
使用ng-pattern="/PATTERN/"來(lái)確保輸入能夠匹配指定的正則表達(dá)式：
電子郵件
驗(yàn)證輸入內(nèi)容是否是電子郵件，只要像下面這樣將input的類型設(shè)置為email即可：
數(shù)字
驗(yàn)證輸入內(nèi)容是否是數(shù)字，將input的類型設(shè)置為number：
URL
驗(yàn)證輸入內(nèi)容是否是URL，將input的類型設(shè)置為 url：
在表單中控制變量
表單的屬性可以在其所屬的$scope對(duì)象中訪問(wèn)到，而我們又可以訪問(wèn)$scope對(duì)象，因此 JavaScript可以間接地訪問(wèn)DOM中的表單屬性。借助這些屬性，我們可以對(duì)表單做出實(shí)時(shí)（和 AngularJS中其他東西一樣）響應(yīng)。這些屬性包括下面這些。
未修改的表單 formName.inputFieldName.$pristine
這是一個(gè)布爾屬性，用來(lái)判斷用戶是否修改了表單。如果未修改，值為true，如果修改過(guò)值為false；
修改過(guò)的表單 formName.inputFieldName.$dirty
只要用戶修改過(guò)表單，無(wú)論輸入是否通過(guò)驗(yàn)證，該值都返回true：
合法的表單 formName.inputFieldName.$valid
這個(gè)布爾型的屬性用來(lái)判斷表單的內(nèi)容是否合法。如果當(dāng)前表單內(nèi)容是合法的，下面屬性的 值就是true：
不合法的表單 formName.inputFieldName.$invalid
這個(gè)布爾屬性用來(lái)判斷表單的內(nèi)容是否不合法。如果當(dāng)前表單內(nèi)容是不合法的，下面屬性的 值為true：
錯(cuò)誤 formName.inputfieldName.$error
如果驗(yàn)證失敗，這個(gè)屬性的值為true；如果值為false，說(shuō)明輸入字段的值通過(guò)了驗(yàn)證。
下面結(jié)合具體的例子，來(lái)運(yùn)用上面的屬性
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87081.html
摘要：表單驗(yàn)證使用場(chǎng)景在實(shí)際的開(kāi)發(fā)中我們可能會(huì)有這樣的情況。姓名不能為空姓名太短姓名太長(zhǎng)姓名不能為空姓名太短姓名太長(zhǎng)借助表單本身比之前的更簡(jiǎn)單了。結(jié)尾以上就是關(guān)于表單驗(yàn)證的全部?jī)?nèi)容。 前言 在之前的文章《angular表單驗(yàn)證》中主要介紹了一些關(guān)于angular表單驗(yàn)證的基礎(chǔ)知識(shí)。在此篇中將著重以擴(kuò)展angular表單驗(yàn)證的相關(guān)內(nèi)容和實(shí)際開(kāi)發(fā)中的應(yīng)用為主。 表單驗(yàn)證使用場(chǎng)景1 在實(shí)際的開(kāi)發(fā)...
摘要：在表單上添加的會(huì)攔截標(biāo)準(zhǔn)的表單提交事件。并為它們提供了一些共同的行為和屬性，其中有些是可觀察對(duì)象。用于跟蹤一個(gè)單獨(dú)的表單控件的值和有效性狀態(tài)。組件中的頂級(jí)表單就是一個(gè)。在表單所在的中的上添加，再在指定的驗(yàn)證方法中調(diào)用來(lái)顯示驗(yàn)證失敗信息。 angular4 表單 模板表單 在app.module中導(dǎo)入FormsModule之后，項(xiàng)目中的form表單都會(huì)是一個(gè)ngForm，也就是一個(gè)模板表...
摘要：在模塊里面引入要使用響應(yīng)式表單，就要從包中導(dǎo)入，并把它添加到你的的數(shù)組中。導(dǎo)入驗(yàn)證器函數(shù)響應(yīng)式表單包含了一組開(kāi)箱即用的常用驗(yàn)證器函數(shù)。這些驗(yàn)證器屬性可以和響應(yīng)式表單提供的內(nèi)置驗(yàn)證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應(yīng)式表單，就要從@angular/forms包中導(dǎo)入ReactiveFormsModule，并把它添加到你的N...
摘要：在模塊里面引入要使用響應(yīng)式表單，就要從包中導(dǎo)入，并把它添加到你的的數(shù)組中。導(dǎo)入驗(yàn)證器函數(shù)響應(yīng)式表單包含了一組開(kāi)箱即用的常用驗(yàn)證器函數(shù)。這些驗(yàn)證器屬性可以和響應(yīng)式表單提供的內(nèi)置驗(yàn)證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應(yīng)式表單，就要從@angular/forms包中導(dǎo)入ReactiveFormsModule，并把它添加到你的N...
閱讀 916·2021-11-25 09:43
閱讀 1283·2021-11-17 09:33
閱讀 2999·2019-08-30 15:44
閱讀 3301·2019-08-29 17:16
閱讀 472·2019-08-28 18:20
閱讀 1625·2019-08-26 13:54
閱讀 547·2019-08-26 12:14
閱讀 2166·2019-08-26 12:14
