angular編寫表單驗證

angular編寫表單驗證

1、總體概述

表單內容以下圖，包括經常使用的用戶名、密碼、確認密碼、手機、郵箱等

1. 總體js代碼不多，就一個指令用於寫確認密碼和密碼是否相等。其餘 驗證都是使用angular自帶的指令進行校驗和顯示。
2. 本demo還使用了bootstrap的柵欄功能進行佈局，由於想寫的是demo因此不少樣式以及其餘限制就不寫了，我認爲越是簡單越好讓別人改寫使用

2、重點說明

一、表單屬性：

$dirty:已經修改過

$invalid:不合法

$valid:合法

$error:錯誤

$pristine:未修改過

novalidate 阻止表單默認操做





<span class="col-4" ng-show="myForm.password.$dirty && myForm.password.$invalid">

<small class="text-danger" ng-show="myForm.password.$error.required">

密碼是必填的

</small>

<small class="text-danger" ng-show="myForm.password.$error.minlength">

長度不能小於8位

</small>

<small class="text-danger" ng-show="myForm.password.$error.maxlength">

長度不能大於64位

</small>

</span>





二、相關指令：

ng-minlength:最小長度

ng-maxlength：最大長度

required：必填

ng-pattern：正則表達式驗證

ng-disabled：按鈕禁用





<input type="text" class="col-6" name="phone" ng-model="phone" ng-pattern="/(^0\d{2,3}-\d{7,8}$)|(^1[3|4|5|6|7|8][0-9]{9}$)/" required/>




<button ng-disabled="myForm.$invalid" ng-click="submit()">submit</button>

三、form表單必定要有name屬性，每一個input值也須要有name屬性，好比已經輸入過的表單表示是：myForm.name.$dirty 即 表單name.輸入name.表單屬性

四、確認密碼自定義指令

確認密碼這個暫時沒法經過原有的指令實現，因此使用了directive，主要是經過觀察兩個輸入框的值，若是不相等則在確認密碼欄後顯示錯誤信息，以下





var app = angular.module('app',[]);

app.directive('compare',function(){

return {

require: 'ngModel',

link: function(scope,ele,attrs,ctrl){

var flag = false;

scope.$watch("password",function(scope,ele,attrs,ctrl){

var password2 = attrs.myForm.password2.$viewValue;

if(scope != password2) {

flag = true;

}else{

flag = false;

}

attrs.myForm.password2.$invalid = flag;

})

scope.$watch("password2",function(scope,ele,attrs,ctrl){

var password = attrs.myForm.password.$viewValue;

if(scope != password) {

flag = true;

}else{

flag = false;

}

attrs.myForm.password2.$invalid = flag;

})

}

}

})



源代碼見github： https://github.com/liaoanran/angular-formValidation