Angular form表单失去焦点校验

最新推荐文章于 2023-04-23 16:57:11 发布

Slice-ddd

最新推荐文章于 2023-04-23 16:57:11 发布

阅读量2.7k

点赞数

文章标签：表单手动校验

本文链接：https://blog.csdn.net/qq_34626003/article/details/52370547

版权

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