之前做了一个AngualrJs form表单自动校验，同事说用户体验很差，一输入就是错误，都不想注册了。。几番查资料修改后 。。。之前的代码就不看了，直接看修改后的---->
<!DOCTYPEhtml><html lang="en" ng-app="findPassword"><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/bootstrap.css"/><style>input{text-indent: 2em;border:none;outline:none;}.form-control-feedback{left: 0;}.text-error{color:#ff7e7e;}.submit{text-indent:0;}#findPassword{display:block;}</style><script src="js/lib/jQuery-2.2.0.min.js"></script><script src="js/lib/md5-min.js"></script><script src="js/lib/angular.js"></script></head><body ng-controller="appCtrl"><div class="modal" id="findPassword" role="dialog" aria-labelledby="findPassword"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h3>重设密码</h3></div><div class="modal-body"><form name="findPasswords" ng-submit="formSubmit(!findPasswords.password.$error.passwords && !findPasswords.passwordAgain.$error.pwmatch)" novalidate><div class="form-group"><span ng-show="findPasswords.password.$error.passwords" class="text-error">密码格式不正确 </span><span ng-show="findPasswords.passwordAgain.$error.pwmatch && !findPasswords.password.$error.passwords" class="text-error">两次密码输入不一致 </span></div><div class="form-group has-feedback"><span class="glyphicon glyphicon-lock form-control-feedback"></span><input type="password" class="form-control" name="password" id="userPassword" ng-model="user.password" placeholder="6-16个字符（英文字母或数字，区分大小写）" check-email-on-blur required/></div><div class="form-group has-feedback"><span class="glyphicon glyphicon-lock form-control-feedback"></span><input type="password" class="form-control" name="passwordAgain" ng-model="user.passwordAgain" pw-check="userPassword" placeholder="再次输入新密码" required/></div><div class="form-group"><input type="submit" ng-click="allowValidation()" class="form-control btn btn-primary submit" value="注册"/></div></form></div></div></div></div></body><script>(function() {'use strict';var app=angular.module('findPassword',[]);app.controller('appCtrl',['$scope',function($scope) {$scope.user= {};
$scope.formSubmit=function(isValid) {
if(!isValid){
//判断是否有错，如果有错，不执行
return false;}else{console.log( $scope.user);} }; $scope.allowValidation=function() {$scope.$broadcast('kickOffValidations'); }; }]);app.directive('pwCheck', [function() {
//校验前后密码是否一致return{restrict:'A',require:"ngModel",link:function(scope, elm, attr, ctrl) {if(attr.type==='radio'|| attr.type==='checkbox')return;elm.unbind('input').unbind('keydown').unbind('change');elm.bind('blur',function() {scope.$apply(dovalidation);});scope.$on('kickOffValidations',dovalidation);functiondovalidation(){var firstPassword='#'+ attr.pwCheck;if(elm.val() ===$(firstPassword).val()){ctrl.$setValidity('pwmatch',true);}else{ctrl.$setValidity('pwmatch',false);}}}}}]);app.directive('checkEmailOnBlur',function(){
//校验密码格式var Password_REGX= /^\d{9,16}$|^(?!\d+$)[0-9A-z]{6,16}$/;return{restrict:'A',require:'ngModel',link:function(scope, elm, attr, ctrl) {if(attr.type==='radio'|| attr.type==='checkbox')return;elm.unbind('input').unbind('keydown').unbind('change');elm.bind('blur',function() {scope.$apply(dovalidation);});scope.$on('kickOffValidations',dovalidation);functiondovalidation() {if(Password_REGX.test(elm.val())) {ctrl.$setValidity('passwords',true);}else{ctrl.$setValidity('passwords',false);}}}};}); })();</script></html>
