詳解AngularJS中的表單驗證(推薦)_AngularJS

AngularJS內建了很多驗證，什麼必填，最大長度，最小長度...，這裡記錄幾個有用的正則式驗證

1.使用angularjs的表單驗證

正則式驗證

只需要配置一個正則式，很方便的完成驗證，理論上所有的驗證都可以用正則式完成

//javascript$scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$";$scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$";$scope.pwdRegx = "[a-zA-Z0-9]*";<div class="form-group"><input class="form-control" name="mobile" type="text" ng-model="account.mobile" required ng-pattern="mobileRegx"/><span class="error" ng-show="registerForm.$submitted && registerForm.mobile.$error.required">*手機號不可為空</span><span class="error" ng-show="registerForm.$submitted && registerForm.mobile.$error.pattern">*手機號地址不合法</span></div><input type="text" ng-pattern="/[a-zA-Z]/" />

數字

設定input的type=number即可

<div class="form-group col-md-6"><label for="password">預估時間</label><div class="input-group"><input required type="number" class="form-control" ng-model="task.estimated_time" name="time" /><span class="input-group-addon">分鐘</span></div><span class="error" ng-show="newTaskForm.$submitted && newTaskForm.time.$error.required">*請預估時間</span> </div>

郵箱

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

URL

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

效果

效果是即時的，很帶感

2.使用ngMessages驗證表單

相對於上面的每個驗證都要自己寫代碼判斷，ngMessages提供了一種更為簡潔的方式

https://docs.angularjs.org/api/ngMessages/directive/ngMessages

angular.module('ngMessagesExample', ['ngMessages']);<form name="myForm"><label>Enter your name:<input type="text"name="myName"ng-model="name"ng-minlength="5"ng-maxlength="20"required /></label><pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre><!--需要配合 ng-if使用，否則一開始就顯示出來了, 你摸了就會觸發驗證--> <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert" ng-if="myForm.myName.$touched"><div ng-message="required">You did not enter a field</div><div ng-message="minlength">Your field is too short</div><div ng-message="maxlength">Your field is too long</div></div></form>

簡直是第二次解放啊。。。

2.動態產生的表單的驗證

如果你有一部分form的內容是動態產生的，數量和名字都不確定的時候，該如何驗證這些產生的元素呢？其實維護一個動態form本來就是個問題。但是在angular中，只需要記住一點：準備好你的資料，其他的交給angular。像下面這個例子，你只需要維護好一個數組，然後利用ng-repeat就可以快速的呈現到頁面上。

其實動態form和一般的form驗證都是一致的，只是動態form需要使用myForm[inout_name].$error的形式訪問

<!-- 動態顯示狀態的負責人 --><div class="form-group col-md-6" ng-repeat="sta in task.status_table | orderBy : sta.sequence_order"><label>{{sta.status_name}} 負責人</label><select required class="form-control" ng-model="sta.user_id" ng-options="qa.id as qa.last_name+' '+qa.last_name for qa in taskUserList" name="{{sta.status_name}}"></select><div ng-messages="newTaskForm[sta.status_name].$error" ng-if="newTaskForm.$submitted || newTaskForm[sta.status_name].$touched"><p class="error" ng-message="required">*請選擇負責人</p></div></div>

3. 必填項加亮顯

有些表單我們不希望粗暴的在下面添加文字資訊提示驗證，而是希望更簡潔的方式，如：加亮邊框，反白

需要做的只是在required驗證沒通過的時候添加class，改變元素的樣式即可

<form name="loginForm" novalidate ng-submit="loginPost()" class="navbar-form navbar-right" ng-hide="login"><fake-autocomplete></fake-autocomplete><div class="form-group"><input name="user_name" required maxlength="50" type="text" class="form-control" placeholder="手機號或郵箱" ng-model="account.user_name" ng-class="{warn:loginForm.$submitted && loginForm.user_name.$error.required}"></div><div class="form-group"><input name="password" required type="password" maxlength="50" placeholder="密碼" ng-model="account.password" ng-class="{'form-control':1,warn:loginForm.$submitted && loginForm.password.$error.required}"></div><button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-lock"></span> 登入</button></form>.warn {border-color: #f78d8d !important;outline: 0 !important;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(239, 154, 154) !important;box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(239, 154, 154) !important;}

以上所述是小編給大家介紹的詳解AngularJS中的表單驗證，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！