[英]Can't see what I am drawing, but I can check console to see it's working, also it uploads to database
[英]Can't see the inf loop that i am making
对于学校作业,我必须制作一个jQuery插件。 我几乎完成了,但是由于某种原因我真的看不到,当我尝试提交表单时,我最终陷入了无限循环(这会导致Google 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);
在最后一种方法中,我之前尝试过一些方法,但没有得到该方法的帮助。
您必须要提交,然后再在处理程序中再次提交表单。
更改
$( "#testform" ).submit();
至
$( "#testform" )[0].submit();
这将执行本机表单提交,而不是再次触发Submit事件。
我不认为这是一个无限循环,我认为这是您的代码附加了大量事件处理程序,并且您的浏览器在尝试处理所有这些事件时崩溃了。
我建议您获取一些论文并确定代码执行的位置。 它仅应将给定类型的事件附加到给定元素一次 。 如果这样做不止一次,那么您几乎肯定会遇到问题!
编辑:阅读汤姆的答案,确实存在无限循环! 当表单有效时,您不应阻止默认事件处理程序。 仅当您要停止提交表单时,才应调用e.preventDefault()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.