AngularJS(五) 表單及輸入驗證

2021-09-28 12:45:12 字數 2045 閱讀 1443

表單基礎

表單是html中很重要的乙個部分,基本上我們的資訊錄入都依靠表單,接下來我們學習如何在angularjs中使用表單,首先看以下示例**:

示例**angularjs_13.html

分析以上**,我們新增了乙個表單,在表單中增加了ng-submit指令,這樣我們就無需在提交按鈕中新增ng-click了,兩者的區別是,前者有多種方式觸發表單提交事件:單擊提交按鈕、文字框內回車等。

接下來要注意的是,我們對於文字框的ng-model資料繫結不是「name」與「email」,而是「user.name」與「user.email」,但是在控制器**中,我們並未宣告user物件,即沒有類似於「var user={}」物件宣告**。在angularjs中,當使用ng-model時,其會自動建立所必須的物件和鍵來例項化資料繫結,因此,初始時是沒有user物件的,只有在當使用者名稱或email框中輸入字元時,才會建立user物件,並賦值到相應的繫結字段。

最後,我們在submit方法中顯示user物件,為了實現可見性,我們使用了json.stringfy來將物件轉換成字串以便顯示其內容。

輸入驗證

在表單的輸入中,總是離不開輸入驗證,如不能為空、必須為郵箱格式、是否為數字、輸入字元長度範圍等,我們來看看angularjs是如何實現輸入驗證的,看以下**:

示例**angularjs_14.html

以上**是在示例13上更改的,我們主要分析一下變更的部分。

首先我們為表單指定了名稱為「myform」以便之後使用,同時在form中新增了「novalidate」屬性,這個是阻止html5預設的輸入驗證,因為我們要使用自己的輸入驗證。

隨後在使用者名稱輸入框中,我們增加了ng-minlength指令,規定了使用者名稱的最小長度為4個字元,同時新增了「required」屬性,表明該欄位不能為空。在郵件輸入框中,我們設定了「type='email'」,表明該輸入框需要對輸入內容做郵箱有效性驗證。

最後在提交按鈕中,我們新增了指令ng-disabled來控制該按鈕的有效性,其值等於myform.$invalid,如果在表單中,只要有不符合輸入驗證的,則該值便為false,自然提交按鈕便無效。

在該段**中,我們通過驗證器(如ng-minlength)、表單狀態(如$invalid)等的綜合使用來實現輸入驗證,我們做乙個總結:

angularjs驗證器

angularjs表單狀態

表單狀態均是布林值,我們一般利用其來顯示、隱藏、禁用或啟用html元素,對於$error狀態,我們接下來將進一步說明。

在示例14中,當有字段驗證未通過時,我們只是簡單的將提交按鈕設定為無效,但是通常,我們需要提供更多的錯誤資訊,來引導客戶輸入正確的資訊,這個一般就要用到$error了,來看以下**:

使用者名稱長度必須大於4位

郵箱是必須的

示例**angularjs_15.html

我們來分析以上**,與示例14做比較,首先我們為輸入框新增了name屬性,接下來在輸入框後跟著span標籤,當輸入驗證不通過時顯示相應的資訊,span標籤的顯隱由指令ng-show來控制,而其值是取決於$error的不同狀態,如當使用者名稱輸入框中輸入的字元長度小於4位時,則「myform.name.$error.minlength」的值為true,因此相應的span便顯示,提示使用者錯誤資訊。

該系列的示例**

更多專業前端知識,請上

【猿2048】www.mk2048.com

angularjs表單驗證

為了介面顯示的更加完美,這裡也引入了bootstrap index.html main.js controller signupcontroller function scope scope.submitform function directive compare function o.stric...

AngularJs 表單校驗

angularjs實現了資料雙向繫結,改變了html格局下需手寫大段js來處理動態資料問題。不能為空 長度不足3位 已存在其中ng submit表示表單的提交方法為processform 而required用於非空校驗 ng minlength用於最短長度校驗 name validation則是自定...

AngularJS 輸入驗證

angularjs 表單和控制項可以驗證輸入的資料。在前面的幾個章節中,你已經學到關於 angularjs 表單和控制項的知識。angularjs 表單和控制項可以提供驗證功能,並對使用者輸入的非法資料進行警告。客戶端的驗證不能確保使用者輸入資料的安全,所以服務端的資料驗證也是必須的。doctype...