您好，我是一名后端开发工程师，由于工作需要，现在系统的从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="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="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>
时间不早了，明天在仔细研究该问题
今天就到此为止，明天继续研究表单验证，明天学习包括如下几点
表单验证继续研究
指令简单了解学习