您好，我是一名後端開發工程師，由於工作需要，現在系統的從0開始學習前端js框架之angular，每天把學習的一些心得分享出來，如果有什麼說的不對的地方，請多多指正，多多包涵我這個前端菜鳥，歡迎大家的點評與賜教。謝謝！
第五天，昨天學習了簡單的表單驗證，在昨天的基礎上，今天主要對錶單驗證進一步學習研究。
今天主要學習一下幾點：文字框失去焦點後驗證、表單驗證提示資訊顯示處理優化
第一、文字框失去焦點後驗證
文字框失去焦點驗證效果：文字框失去焦點後對其合法性驗證
文字框失去焦點驗證實現方式：定義一個指令（指令後續專門研究）當文字框失去焦點是設定focused=true,獲得焦點為false
提示顯示資訊新增並列顯示條件（focused）
舉一個具體的練習例項
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .oneCount { width: 1000px; height: 60px; line-height: 60px; border-bottom: 1px solid blue; } .oneCount .titleCount { float: left; width: 150px; text-align: right; } .oneCount .valueCount { float: left; width: 300px; text-align: right; } .oneCount .valueCount input { width: 300px; } .oneCount .alertCount { float: left; width: 520px; margin-left: 20px; } .oneCount .alertCount span { float: left; margin-left: 10px; color: #ff0000; } .success { color: #19e1cf !important; } input .ng-pristine { color: #808080; border-bottom: 1px solid #ff0000; } input .ng-dirty { color: #000000; } input .ng-valid { color: #000000; } input .ng-invalid { color: #ff0000; } </style> </head> <body ng-app="myApp" ng-controller="myContro"> <form name="loginForm" novalidate ng-submit="submitForm()"> <div class="oneCount"> <div class="titleCount">賬號：</div> <div class="valueCount"> <input type="text" name="acount" ng-model="user.acount" placeholder="必填：賬號必須由數字字母組合，長度在6-20" required="required" ng-minlength="6" ng-maxlength="20" ng-pattern="/^[0-9a-zA-Z]+$/" ng-focus /> </div> <div class="alertCount"> <span class="warning">*</span> <div class="warning" ng-show="loginForm.acount.$invalid && ((!loginForm.acount.$focused && loginForm.acount.$dirty) || loginForm.submitted )"> <span class="warning" ng-show="loginForm.acount.$error.required">acount必填</span> <span class="warning" ng-show="loginForm.acount.$error.minlength">最少長度為6</span> <span class="warning" ng-show="loginForm.acount.$error.maxlength">最大長度為20</span> <span class="warning" ng-show="loginForm.acount.$error.pattern">賬號格式不符合要求（只能由數字和字母組成）</span> </div> <span class="success" ng-show="!loginForm.acount.$focused &&loginForm.acount.$valid">賬號輸入正確</span> </div> </div> <div class="oneCount"> <div class="titleCount">姓名：</div> <div class="valueCount"> <input type="text" name="name" ng-model="user.name" placeholder="請輸入姓名" ng-maxlength="20" ng-focus /> </div> <div class="alertCount"> <span class="warning" ng-show="!loginForm.name.$focused && loginForm.name.$error.maxlength">姓名最大長度為20</span> <span class="success" ng-show="!loginForm.name.$focused && loginForm.name.$dirty && loginForm.name.$valid">姓名輸入正確</span> </div> </div> <div class="oneCount"> <div class="titleCount"></div> <div class="valueCount"> <input type="submit" value="提交" style="width:40px;" /> </div> </div> </form> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myContro", function ($scope) { $scope.user = { acount: "w額外", name: "", age: "", pass: "", rePass: "" }; $scope.submitted = false; //提交表單接受函式 $scope.submitForm = function () { if ($scope.loginForm.$valid) { //// 表單資料真實提交邏輯 } else { $scope.loginForm.submitted = true; } } }); app.directive(`ngFocus`, function () { var FOCUS_CLASS = "ng-focused"; return { restrict: `A`, require: `ngModel`, link: function (scope, element, attrs, ctrl) { ctrl.$focused = false; element.bind(`focus`, function (evt) { element.addClass(FOCUS_CLASS); scope.$apply(function () { ctrl.$focused = true; }); }).bind(`blur`, function () { element.removeClass(FOCUS_CLASS); scope.$apply(function () { ctrl.$focused = false; }) }) } } }) </script>
第二、表單驗證提示資訊顯示處理優化
上面的表單驗證的提示資訊在體驗上不是很友好，同一個文字框有可能同時顯示多個提示資訊
新版本的angularjs中，引入了ngMessages指令，用於更加友好的處理方式
ngmessages同時指出提示模板引入，通過ng-messges-include 來載入外部提示模板
直接上練習例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp" ng-controller="myContro"> <form name="loginForm" novalidate ng-submit="submitForm()"> <div class="oneCount"> <div class="titleCount">賬號：</div> <div class="valueCount"> <input type="text" name="acount" ng-model="user.acount" placeholder="必填：賬號必須由數字字母組合，長度在6-20" required="required" ng-minlength="6" ng-maxlength="20" ng-pattern="/^[0-9a-zA-Z]+$/" ng-focus /> </div> <div class="alertCount"> <span class="warning">*</span> <div class="warning" ng-messages="loginForm.acount.$error"> <ng-messages-include src="template/required.html"></ng-messages-include> <span class="warning" ng-message="minlength">該項最少長度為6</span> <span class="warning" ng-message="maxlength">該項最大長度為20</span> <div ng-messages-include="template/numberAndZhiMu.html"> </div> </div> </div> </div> <div class="oneCount"> <div class="titleCount"></div> <div class="valueCount"> <input type="submit" value="提交" style="width:40px;" /> </div> </div> </form> </body> </html> <script src="Scripts/angular.js"></script> <script src="Scripts/angular-messages.js"></script> <script type="text/javascript"> var app = angular.module("myApp", [`ngMessages`]); app.controller("myContro", function ($scope) { $scope.user = { acount: "" }; $scope.submitted = false; //提交表單接受函式 $scope.submitForm = function () { if ($scope.loginForm.$valid) { //// 表單資料真實提交邏輯 } else { $scope.loginForm.submitted = true; } } }); </script>
時間不早了，明天在仔細研究該問題
今天就到此為止，明天繼續研究表單驗證，明天學習包括如下幾點
表單驗證繼續研究
指令簡單瞭解學習