javascript - 防止函数在 java 脚本中函数的最后一条语句中调用自身
问题描述
我一直在学习 javascript 和 jquery,当我尝试使用 jquery 函数验证表单字段时遇到了问题。问题是它在前两次被调用时工作正常(当我按下特定元素的更新按钮时)以及每当我试图第三次调用它时(通过按下与之前相同元素的更新按钮)它正在调用自己,但我显然没有提到任何递归调用,也没有在函数中再次调用它。我不确定它为什么会调用自己。请帮帮我。我将附上小提琴。在 main.updateData(Object.assign({}, main.newObject), keys) 中触发重置后;第三次显示不应该发生的名称空错误。
我尝试过设置断点并检查这种奇怪行为背后的原因,但我做不到
名称字段应仅在为空时显示错误,但第三次显示错误,即使它不为空
validateFormData: function(value, keys, idCount) {
var keyIndex = 0;
main.newObject[keys[keyIndex++]] = idCount;
if (value == "update") {
main.newObject[keys[0]] = $(".active-contact").attr('id');
//alert("new updated id is " + main.newObject[keys[0]]);
}
var validElementsCount = 0;
var alphabet_pattern = /^[a-z]+\s*/i;
var email_pattern = /[a-z]{0,}[0-9]{0,4}[.]{0,1}[0-9]{0,4}[a-z]{0,8}[0-9]{0,4}[@][a-z]{0,20}[.](com)/i;
var number_pattern = /^[0-9]{10}$/;
var website_pattern = /^(www)[.][a-z]{1,20}[.](com)$/i;
/*Validating the form inputs against the regex pattern*/
if ($("#employee-name").val() == "") {
$("#employee-name-error").text("name cannot be empty");
} else if (!alphabet_pattern.test($("#employee-name").val())) {
$("#employee-name-error").text("Only alphabets are allowed");
} else {
validElementsCount++;
$("#employee-name-error").text("");
main.newObject[keys[keyIndex++]] = $("#employee-name").val();
//alert("object is " + JSON.stringify(main.newObject[keys[keyIndex-1]]) + " key is " + keys[keyIndex-1]);
}
//employee email validation
if (email_pattern.test($("#employee-email").val()) || $("#employee-email").val() == "") {
$("#employee-email-error").text("");
validElementsCount++;
main.newObject[keys[keyIndex++]] = $("#employee-email").val();
//alert("object is " + JSON.stringify(main.newObject[keys[keyIndex - 1]]) + " key is " + keys[keyIndex - 1]);
} else {
$("#employee-email-error").text("Follow email pattern");
}
//employee mobile validation
if (number_pattern.test($("#employee-mobile").val()) || $("#employee-mobile").val() == "") {
$("#employee-mobile-error").text("");
validElementsCount++;
main.newObject[keys[keyIndex++]] = $("#employee-mobile").val();
//alert("object is " + JSON.stringify(main.newObject[keys[keyIndex - 1]]) + " key is " + keys[keyIndex - 1]);
} else {
$("#employee-mobile-error").text("Only 10 digit number is allowed");
}
//employee landline no validataion
if (number_pattern.test($("#employee-land-line").val()) || $("#employee-land-line").val() == "") {
$("#employee-land-line-error").text("");
validElementsCount++;
main.newObject[keys[keyIndex++]] = $("#employee-land-line").val();
//alert("object is " + JSON.stringify(main.newObject[keys[keyIndex - 1]]) + " key is " + keys[keyIndex - 1]);
} else {
$("#employee-land-line-error").text("Only 10 digit number is allowed");
}
//employee website validation
if (website_pattern.test($("#employee-website").val()) || $("#employee-website").val() == "") {
$("#employee-website-error").text("");
validElementsCount++;
main.newObject[keys[keyIndex++]] = $("#employee-website").val();
} else {
$("#employee-website-error").text("Follow website pattern");
}
main.newObject[keys[keyIndex++]] = $("#employee-address").val();
if (validElementsCount == 5) {
if (value == "add") {
main.addEmployeeClick(Object.assign({}, main.newObject));
$(".employee-details-form").trigger("reset");
} else if (value == "update") {
//alert("new object is " + JSON.stringify(Object.assign({}, main.newObject), keys));
main.updateData(Object.assign({}, main.newObject), keys);
$(".employee-details-form").trigger("reset");
}
}
},
解决方案
您可以在第 34 行的 #update-employee-btn click 事件绑定之前添加 .off() 。
$("#update-employee-btn").off().click(....)
让我知道它是否也适合你。
推荐阅读
- influxdb - 如何使用 FluentD 作为 Telegraf 和 InfluxDB 之间的缓冲区
- java - 如何使用 JavaSpark 有效地处理百万条记录
- azure - 设置 StartFromBeginning = true 时 Azure 函数不会自动启动 cosmos 触发器
- javascript - 如何打开和关闭 Vuetify Carousel 组件的右/左箭头
- excel - VBA - 尝试输入文本并单击搜索按钮,表格内,表单内,无 ID 元素,只有类元素
- list - 如何在序言列表中交换三个三个元素?
- postman - 如何在 Postman 预请求脚本中使用 Bcrypt?
- html - 如何动态更改步骤进度条的值
- flutter - 点击 Button 时更新 BottomNavigationBar
- python - 数组乘法乘以值的出现而不是值本身