angulaJs 表單驗證相關

Angular 的表單屬性 $valid, $invalid, $pristine, $dirty

Angular 提供了有關表單的屬性來幫助我們驗證表單. 他們給我們提供了各種有關一個表單及其輸入的信息,並且應用到了表單和輸入.

屬性類
描述
$valid ng-valid Boolean 告訴我們這一項當前基於你設定的規則是否驗證通過
$invalid ng-invalid Boolean 告訴我們這一項當前基於你設定的規則是否驗證未通過
$pristine ng-pristine Boolean 如果表單或者輸入框沒有使用則爲True
$dirty ng-dirty Boolean 如果表單或者輸入框有使用到則爲True


Angular 也提供了有關表單及其輸入框的類,以便你能夠依據每一個狀態設置其樣式.

1.確保form上標籤有一個name屬性,像下面的例子一樣。最好再加一個novalidate=”novalidate”

2.form中不能有action屬性。提交交由ng-submit處理

3.每個input一定要有ng-model,最好有一個name方便引用。然後用require或者ng-minlength之類才起作用

<form name="form" novalidate="novalidate">
  <label name="email">Your email</label>
  <input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>


ng默認提供了驗證

驗證是否已輸入文字,只需在標籤上加上required:


<input type="text" ng-model="user.name" required />

驗證至少輸入{number}個字符,使用指令ng-minlength=“{number}”:


<input type="text" ng-model="user.name" ng-minlength="5" />

驗證至多輸入{number}個字符,使用指令ng-maxlength=“{number}”:


<input type="text" ng-model="user.name" ng-maxlength="20" />

確保輸入匹配一個正則表達式,使用指令ng-pattern="/PATTERN/":


<input type="text" ng-model="user.name" ng-pattern="/a-zA-Z/" />

驗證輸入是一個Email,設置input的type屬性爲email:

<input type="email" name="email" ng-model="user.email" />

驗證輸入是一個數字,設置input的type屬性爲number:

<input type="number" name="number" ng-model="user.age" />

驗證輸入是一個URL,設置input的type屬性爲url

<input type="url" name="homepage" ng-model="user.weburl" />

驗證規則

Angular 有很多驗證規則,像是 tong-min leng than dng-max length.

 Angular還可以自己配置規則.  Angular輸入指引上有說明 .

<input
   ng-model="{ string }"
   name="{ string }"
   required
   ng-required="{ boolean }"
   ng-minlength="{ number }"
   ng-maxlength="{ number }"
   ng-pattern="{ string }"
   ng-change="{ string }">
</input>

禁用提交按鈕 ng-disabled

現在真正的好戲上演了。我們開始使用Angular的屬性 。首先讓我們禁用我們的提交按鈕。如果我們的表單是$invalid的,我們只想禁用它。

<!-- index.html -->
...

    <!-- SUBMIT BUTTON -->
    <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>

...

只使用一點代碼(ng-disabled),如果我們的表單是$invalid的,表單按鈕將被禁用。 

<!-- index.html -->
...

    <!-- NAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
        <label>Name</label>
        <input type="text" name="name" class="form-control" ng-model="user.name" required>
        <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
    </div>
    
    <!-- USERNAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
        <label>Username</label>
        <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
        <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
        <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
    </div>
        
    <!-- EMAIL -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email">
        <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
    </div>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章