关闭

Angular form表单失去焦点校验

标签: 表单手动校验
372人阅读 评论(0) 收藏 举报

之前做了一个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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2079次
    • 积分:150
    • 等级:
    • 排名:千里之外
    • 原创:14篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类