之前做了一个AngualrJs form表单自动校验,同事说用户体验很差,一输入就是错误,都不想注册了。。几番查资料修改后 。。。之前的代码就不看了,直接看修改后的---->
<!DOCTYPE html>
<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);
function dovalidation(){
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);
function dovalidation() {
if (Password_REGX.test(elm.val())) {
ctrl.$setValidity('passwords', true);
} else {
ctrl.$setValidity('passwords', false);
}
}
}
};
});
})();
</script>
</html>