我在Chrome中遇到了javascript问题。我有一个表单，其中包含文本输入和复选框。 textinput的定义如下：
<input type="text" style="display:block;", id="BroadsofTypeInput", onblur = "CustomValidation.validate.pText(this, 550,'Required field! Maximum 550 characters!');">
在onblur事件上调用的Javascript内联函数验证输入。当输入为空时，它会在输入标记旁边添加一个div元素。 Div元素显示错误消息。
接下来当我点击复选框时，会调用这段代码：
function SetVisibleContent(control) {
var dropdown = document.getElementById("dropdonwtypes");
var textfield = document.getElementById("BroadsofTypeInput");
if (control.checked == true) {
ShowControl(dropdown, true);
ShowControl(textfield, false);
dropdown.value = "";
}
else {
ShowControl(dropdown, false);
ShowControl(textfield, true);
textfield.value = "";
}
RemoveErrors();
debugger;
}
问题是：当我单击复选框以检查错误消息时 应该被删除，但事实并非如此。但这不是全部，当开发人员工具在Chrome中打开并且调试器线被捕获时，它就可以工作 这是它变得疯狂的地方。当处于调试模式并且如果单击F8时捕获调试器行，则会删除该消息。如果我点击“恢复脚本执行（F8）”上的蓝色按钮，它就不起作用。
以下是下载示例代码的链接： https://drive.google.com/file/d/0B0cu8N689t1MUVYxdkZhT2V4bzg/view?usp=sharing
var CustomValidation = CustomValidation || {};
CustomValidation.validate = {
errorEmpty: "Required field!",
errorFormat: "Wrong format!",
errorLength: "Value to long!",
errorEmptyValues: "value cannot be empty!",
errorInterval: "Value not in interval!",
submitButton: null,
//Error message methods
errorMsgEmpty: function (control, errorMsg) {
$(control).focus();
$(control).css("background", "#FF9F9F");
if (errorMsg != "" && errorMsg != undefined)
$(control).after('<div class="errorInputMessage">' + errorMsg + '</div>');
else
$(control).after('<div class="errorInputMessage">' + this.errorEmpty + '</div>');
},
errorMsgEmptyValues: function (control, errorMsg) {
if (errorMsg != "" && errorMsg != undefined)
$(control).after('<div class="errorInputMessage">' + errorMsg + '</div>');
else
$(control).after('<div class="errorInputMessage">' + this.errorEmptyValues + '</div>');
},
errorMsgFormat: function (control, errorMsg) {
$(control).focus();
$(control).css("background", "#FF9F9F");
if (errorMsg != "" && errorMsg != undefined)
$(control).after('<div class="errorInputMessage">' + errorMsg + '</div>');
else
$(control).after('<div class="errorInputMessage">' + this.errorFormat + '</div>');
},
errorMsgLength: function (control, errorMsg) {
$(control).focus();
$(control).css("background", "#FF9F9F");
if (errorMsg != "" && errorMsg != undefined)
$(control).after('<div class="errorInputMessage">' + errorMsg + '</div>');
else
$(control).after('<div class="errorInputMessage">' + this.errorLength + '</div>');
},
errorMsgInterval: function(control, errorMsg)
{
$(control).focus();
$(control).css("background", "#FF9F9F");
if (errorMsg != "" && errorMsg != undefined)
$(control).after('<div class="errorInputMessage">' + errorMsg + '</div>');
else
$(control).after('<div class="errorInputMessage">' + this.errorInterval + '</div>');
},
//Reset input background
resetBack: function (control) {
$(control).css("background", "#FFFFFF");
},
//Check length
checkLength: function (control, length, errorMsg) {
if (control.value != undefined) {
if (length != 0 && control.value.length > length) {
this.errorMsgLength(control, errorMsg);
return false;
}
}
return true;
},
//Disable submit button
disableButton: function(){
var inputArray = $(".errorInputMessage");
if (inputArray.length > 0)
this.submitButton.setAttribute("disabled", "disabled");
else
this.submitButton.removeAttribute("disabled");
},
//Validation methods
pInt: function (control, length, errorMsg) {
var errorControl = $(control).next();
if ($(errorControl).hasClass("errorInputMessage"))
$(errorControl).remove();
if (length != 0)
if (!this.checkLength(control, length, errorMsg))
return false;
if (control.value == "") {
this.errorMsgEmpty(control, errorMsg);
}
//else if (isNaN(control.value) && !$(errorControl).hasClass("errorInputMessage")) {
else if(isNaN(control.value)){
this.errorMsgFormat(control, errorMsg);
}
else
this.resetBack(control);
},
pFloat: function (control, length, errorMsg) {
var errorControl = $(control).next();
if ($(errorControl).hasClass("errorInputMessage"))
$(errorControl).remove();
if (length != 0)
this.checkLength(control, length, errorMsg);
if (control.value == "") {
this.errorMsgEmpty(control, errorMsg);
}
//else if (isNaN(parseFloat(control.value)) && !$(errorControl).hasClass("errorInputMessage")) {
else if (isNaN(control.value)) {
this.errorMsgFormat(control, errorMsg);
}
else
this.resetBack(control);
},
pRegex: function (control, length, regexValue, errorMsg) {
var errorControl = $(control).next();
if ($(errorControl).hasClass("errorInputMessage"))
$(errorControl).remove();
if (length != 0)
this.checkLength(control, length, errorMsg);
if (control.value == "") {
this.errorMsgEmpty(control, errorMsg);
}
else if (regexValue.exec(control.value) == null) {
this.errorMsgFormat(control, errorMsg);
}
else
this.resetBack(control);
},
pText: function (control, length, errorMsg) {
var errorControl = $(control).next();
if ($(errorControl).hasClass("errorInputMessage"))
$(errorControl).remove();
if (length != 0)
this.checkLength(control, length, errorMsg);
var inputArrayError = $(".errorInputMessage");
if (inputArrayError.length > 0)
return false;
if (control.value == "") {
this.errorMsgEmpty(control, errorMsg);
}
else
this.resetBack(control);
},
pIntervalInt:function (control, errorMsg, min, max)
{
var errorControl = $(control).next();
if ($(errorControl).hasClass("errorInputMessage"))
$(errorControl).remove();
if (min > parseInt(control.value) || parseInt(control.value) > max) {
this.errorMsgInterval(control, errorMsg);
}
else
this.resetBack(control);
},
//Validate submit
formSubmit: function () {
var error=0;
var inputArray = $(".validation");
var inputArrayError = $(".errorInputMessage");
if (inputArrayError.length > 0)
return false;
else {
for (var i = 0; i < inputArray.length; i++) {
var errorControl = $(inputArray[i]).next();
if ($(errorControl).hasClass("errorInputMessage"))
$(errorControl).remove();
if (inputArray[i].value == "" || inputArray[i].value == null) {
this.errorMsgEmpty(inputArray[i], '');
error += 1;
}
}
}
if (error > 0)
return false;
else
return true;
},
/* f - validate float,
* i - validate int,
* s - validate string,
* l - validate interval
*/
formSubmitControls: function (controls, errormsg, controlsChecked, filters, intervals) {
if (this.formSubmit()) {
for (var i = 0; i < controls.length; i++) {
//Remove error message so it cannot be repeated
var errorControl = $(controls[i]).next();
if ($(errorControl).hasClass("errorInputMessage"))
$(errorControl).remove();
if (controlsChecked[i] != "" && controlsChecked[i] != undefined) {
if (controlsChecked[i][0].checked) {
this.filterControl(controls[i], 0, filters[i], errormsg[i], intervals[i])
}
else
this.resetBack(controls[i]);
}
else {
if (controls[i].value == "") {
//this.errorMsgEmptyValues(controls[i], errormsg[i]);
this.filterControl(controls[i], 0, filters[i], errormsg[i], intervals[i])
return false;
}
else {
this.filterControl(controls[i], 0, filters[i], errormsg[i], intervals[i])
}
}
}
var inputArray = $(".errorInputMessage");
if (inputArray.length > 0)
return false;
}
else
return false;
return true;
},
filterControl: function (control, length, filters, error, interval) {
var s = "";
var min, max;
if (interval != "" && interval != undefined) {
var s = interval.split(";");
min = s[0];
max = s[1];
}
if (filters.indexOf("f") != -1) {
this.pFloat(control, length, error)
}
if (filters.indexOf("i") != -1) {
this.pInt(control,length, error)
}
if (filters.indexOf("s") != -1) {
this.pText(control, length, error)
}
if (filters.indexOf("l") != -1) {
this.pIntervalInt(control, error, min, max)
}
}
}
function SetVisibleContent(control) {
var dropdown = document.getElementById("dropdonwtypes");
var textfield = document.getElementById("BroadsofTypeInput");
if (control.checked == true) {
ShowControl(dropdown, true);
ShowControl(textfield, false);
dropdown.value = "";
}
else {
ShowControl(dropdown, false);
ShowControl(textfield, true);
textfield.value = "";
}
RemoveErrors();
debugger;
}
function RemoveErrors() {
var inputArrayError = $(".errorInputMessage");
for (var i = 0; i < inputArrayError.length; i++) {
$(inputArrayError[i]).remove();
}
}
function ShowControl(control, show)
{
if (show) {
//control.setAttribute("style", "display:block;visibility:visible;width:450px;");
control.setAttribute("style", "display:block;width:450px;");
}
else {
//control.setAttribute("style", "display:none;visibility:hidden;width:450px;");
control.setAttribute("style", "display:none;width:450px;");
}
}.info, .success, .warning, .errorInputMessage {
border: 1px solid;
margin: 10px 0px;
padding:5px 5px 5px 5px;
background-repeat: no-repeat;
background-position: 5px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.errorInputMessage {
color: #D8000C;
background-color: #FFBABA;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<form>
<label>Text Bro!</label>
<input type="text" style="display:block;", id="BroadsofTypeInput", onblur = "CustomValidation.validate.pText(this, 550,'Required field! Maximum 550 characters!');">
<input type="text" style="display:none;", id="dropdonwtypes", onblur = "CustomValidation.validate.pText(this, 550,'Required field! Maximum 550 characters!');">
<input id="IsBroadsoft" name="IsBroadsoft" onchange="SetVisibleContent(this);" type="checkbox" value="true"> Is Broadsoft
<br />
<input type="submit" value="Save" onclick="CustomValidation.validate.formSubmit()">
</form>
答案 0 :(得分：0)
错误确实已删除！但随后文本输入上的模糊事件再次触发，因此错误再次出现。 当您在调试模式下单击F8时的不同行为，我猜是因为您没有单击文档正文，因此未触发模糊事件。这一行，你会看到：
pText: function (control, length, errorMsg) {
console.log('......ptext.......');
// other codes....................
}