Question

对于学校作业，我必须制作一个jQuery插件。我几乎完成了它，但由于某种原因我真的看不到，当我尝试提交表单（崩溃谷歌Chrome）时，我最终得到一个无限循环。这是代码：

console.log("starting plugin");
$(document).ready(init);

function init() {
    $('#password').on('keyup', clickHandler);
}
function clickHandler() {
    console.log("clickHandler");
    $.fn.passwordCheck();

}
(function () {
    var settings = {
        passwordInput: $('input[type="password"]'),
        passwordNeededLength: 8,
        passwordStrenght: 2,
        errorMessageLoc: 'passwordinfomessage',
        messageLoc: '#passinfo'
    };
    var methods = {
        init: function () {
            console.log("started methods init");
            methods.checkStrength();
        },
        createMessages: function (status) {
            console.log("start function createmessages");
            var $messageLoc = $(settings.messageLoc);
            var $errormessage = settings.errorMessageLoc;
            $($messageLoc).css("display","inline-block");
            if (status === 1) {
                $("#passinfo").empty();
                $messageLoc.append("<p id='passwordLength' class=" + $errormessage + ">the password needs to be atleast " + settings.passwordNeededLength + " characters</p>");
                console.log("created message #1");
            } else if (status === 2) {
                $("#passinfo").empty();
                $($messageLoc).append("<p id='weak' class=" + $errormessage + ">The password is to weak to be accepted, please try adding some characters</p>");
                console.log("created message #2");
            } else if (status === 3) {
                $("#passinfo").empty();
                $($messageLoc).append("<p id='good' class=" + $errormessage + ">The password is the password is of good strength, u can try adding some numbers and capital letters</p>");
                console.log("created message #3");
            } else if (status === 4) {
                $("#passinfo").empty();
                $($messageLoc).append("<p id='strong' class=" + $errormessage + ">The password is strong</p>");
                console.log("created message #4");
            } else if (status === 5) {
                $("#passinfo").empty();
                $($messageLoc).append("<p id='submitButtonMessage' class=" + $errormessage + ">Something is wrong with your password</p>");
                console.log("created message #5");
            }
        },
        checkStrength: function () {
            console.log("start function checkStrength");
            var strength = 0;
            if (settings.passwordInput.val().length >= settings.passwordNeededLength) {
                strength += 1;
                console.log("password length is accept");
                if (settings.passwordInput.val().length >= 25) strength += 2;

                if (settings.passwordInput.val().match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1;

                if (settings.passwordInput.val().match(/([a-zA-Z])/) && settings.passwordInput.val().match(/([0-9])/))  strength += 1;

                if (settings.passwordInput.val().match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1;

                if (settings.passwordInput.val().match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1;

                methods.checkStrengthResult(strength);
            }
            else {
                console.log(settings.passwordInput.val().length);
                console.log("not big");
                if (settings.passwordInput.val() == 0) {
                    console.log("just entered the site");

                } else {
                    $('.' + settings.errorMessageLoc).remove();
                    methods.createMessages(1);
                }
            }
        },
        checkStrengthResult: function (strength) {
            console.log("start function checkStrengthResult");
            console.log(strength);
            //if value is less than 2
            if (strength < 2) {
                console.log("password is to weak");
                methods.createMessages(2);
            }
            if (strength == 2) {
                console.log("password is good");
                methods.createMessages(3);
            }
            if (strength > 3) {
                console.log("password is strong");
                methods.createMessages(4);
                methods.checkPasswordStrength(strength)
            }
        }
        ,
        checkPasswordStrength: function (strength) {
            $( "#testform" ).submit(function( event ) {
                console.log( "Handler for .submit() called." );
                if (strength >= settings.passwordStrenght&& settings.passwordInput.val().length >= settings.passwordNeededLength){
                    console.log("is good");
                    console.log("i will submit");
                    $( "#testform" ).submit();
                    event.preventDefault();

                } else{
                    console.log("not good");
                    event.preventDefault();
                    methods.init();
                }
            });

//            console.log("stopt posting");
//            if (typeof strength == 'undefined'|| strength == 0) {
//                event.preventDefault();
//                console.log("strength was undifined");
//                methods.init()
//            } else {
//                if (strength >= settings.passwordStrenght&& settings.passwordInput.val().length >= settings.passwordNeededLength) {
//                    console.log("password is strong enhough");
//                    event.preventDefault();
//                } else {
//                    console.log("stoping submitting");
////                  console.log(strength);
//                    event.preventDefault();
//                    methods.createMessages(5);
//
//                }
//            }
////        }
        }
    };
    $.fn.passwordCheck = function (options) {
        console.log("start password check");
        if (options) {
            settings = $.extend(settings, options);
            console.log(options);
            console.log(settings);
        }

        $('#password').on('keyup', methods.init());
        $('#submitbutton').on('click', methods.checkPasswordStrength());

        return this;
    };
})(jQuery);

在最后一种方法中我曾经尝试过一些东西，但我没有得到那个以太工作。

Answer 1

您绑定提交，然后在处理程序中再次提交表单。

更改

$( "#testform" ).submit();

到

$( "#testform" )[0].submit();

这将执行本机表单提交，而不是再次触发提交事件。

Answer 2

我认为这不是一个无限循环，我认为您的代码附加了大量数量的事件处理程序，并且您的浏览器崩溃了处理所有这些。

我建议您获取一些文章并绘制代码执行的位置。它应该只将给定类型的事件附加到给定元素一次。如果它不止一次，你几乎肯定有问题！

编辑：阅读汤姆的答案，确实存在无限循环！当表单有效时，您应该不要阻止默认事件处理程序。只有在您要停止提交表单时才应调用e.preventDefault()。

看不到我正在制作的inf循环

2 个答案: