AngularJS表單驗證中級篇（3）_AngularJS

目錄

基本驗證
驗證外掛程式messages
自訂驗證 

基本驗證

<form name="form" novalidate ng-app>  <span>{{form.$invalid}}</span>  <span>{{form.$valid}}</span>  <span>{{form.$dirty}}</span>  <span>{{form.$pristine}}</span>  <input type="text" ng-model="user" required />  <input type="text" ng-model="pwd" required minlength="4" ng-maxlength="5" />  <input type="text" ng-model="phone" required ng-pattern="/1[3|5|7|8|][0-9]{9}/" />  <input type="email" ng-model="email" required />  <input type="url" ng-model="url" required />  <input type="number" ng-model="number" required />  <div>    <button type="reset" ng-disabled="form.$pristine">重設</button>    <button type="submit" ng-disabled="form.$invalid">提交</button>  </div></form>

以上展示了基本的ng驗證.

這裡重點介紹一下上面的特例:

novalidate:禁用H5內建的驗證

ng-maxlength: 如果不寫ng,maxlength則直接限制最多輸入字元,稍微有點區別(IE9 + Chrome 測試)

ng-pattern:通過正則驗證,如果不寫ng開頭,無驗證效果.

注:要啟用驗證 同時需要綁定一個ng-model 

訪問表單屬性

---方位表單: <form name>.<angular property>

---訪問一個輸入框: <form name>.<input name>.<angular property> 

驗證外掛程式

在介紹messages外掛程式之前,我們看下本來的驗證提示

<form name="form" ng-app novalidate>  <span>{{form.user.$error.required?'user該項必填':''}}</span>  <input type="text" ng-model="user" name="user" required />  <span>{{form.pwd.$error.required?'pwd該項必填':''}}</span>  <input type="text" ng-model="pwd" name="pwd" required />  <span>{{form.info.$error.required?'info該項必填':''}}</span>  <input type="text" ng-model="info" name="info" required />  <span>{{form.age.$error.required?'age該項必填':''}}</span>  <input type="text" ng-model="age" name="age" required />  <div>    <button type="submit" ng-disabled="form.$invalid">提交</button>  </div></form>

這裡只是判斷了require 當我們的代碼 我們重複寫了很多3元運算式 

messages外掛程式就是更友好的解決重複的問題

<form name="form" ng-app="myApp" novalidate>  <input type="email" ng-model="user" name="username" required minlength="4" />  <div ng-messages="form.username.$error" ng-messages-multiple>    <div ng-message="required">該項必填</div>    <div ng-message="minlength">低於最低長度</div>    <div ng-message="email">應為email</div>  </div></form><script src="Scripts/angular.min.js"></script><script src="Scripts/angular-messages.min.js"></script><script>  angular.module('myApp', ['ngMessages']);</script>

Nuget:Install-Package AngularJS.Messages

自訂驗證

通過基本的驗證方式,我們已經能夠解決大部分的驗證問題.但項目中永遠充滿著各種各樣的需求.

在ng中的自訂驗證,一般通過指令的形式建立.

<form name="form" ng-app="myApp" novalidate>  <input type="email" ng-model="user" name="username" required ensure-unique minlength="4" />  <div ng-messages="form.username.$error" ng-messages-multiple>    <div ng-message="required">該項必填</div>    <div ng-message="minlength">低於最低長度</div>    <div ng-message="email">應為email</div>    <div ng-message="unique">使用者名稱已存在</div>  </div></form>

在上面的messages外掛程式Demo中,建立一行驗證使用者名稱已存在 以及 在input上添加了ensure-unique指令

同時,我們需要在js中定義ensure-unique指令:

angular.module('myApp', ['ngMessages']).directive('ensureUnique', ['$http', '$timeout', '$window', function ($http, $timeout, $window) {      return {        restrict: "A",        require: 'ngModel',        link: function (scope, ele, attrs, ngModelController) {          scope.$watch(attrs.ngModel, function (n) {            if (!n) return;            $timeout.cancel($window.timer);            $window.timer = $timeout(function () {              $http({                method: 'get',                url: '/api/checkusername/', //根據換成自己的url                params: {                  "username": n                }              }).success(function (data) {                ngModelController.$setValidity('unique', data.isUnique); //這個取決於你返回的，其實就是返回一個是否正確的欄位，具體的這塊可以自己修改根據自己的項目              }).error(function (data) {                ngModelController.$setValidity('unique', false);              });            }, 500);          });        }      };    }]);

指令不是本節重點內容,這裡簡單說下

ngModelController.$setValidity('unique', bool);

通過該API可以設定$error.unique.

setValidity為true,則$error.unique為false

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。