防止函数在 java 脚本中函数的最后一条语句中调用自身

Question

我一直在学习 javascript 和 jquery，但在尝试使用 jquery 函数验证我的表单域时遇到了问题。问题是它在前两次被调用时工作正常（当我按下特定元素的更新按钮时）以及每当我尝试第三次调用它时（通过按下与之前相同元素的更新按钮）它正在调用自己，但我显然没有提到任何递归调用，也没有在函数内再次调用它。我不确定它为什么自称。请帮帮我。我将附上 fiddle。在 main.updateData(Object.assign({}, main.newObject), keys) 中触发重置后；第三次显示不应该发生的名称为空错误。

我试过设置断点并检查这种奇怪行为背后的原因，但我做不到

名称字段只有在为空时才应该显示错误，但第三次即使不为空也显示错误

FIDDLE

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");

    }

  }

},

Answer 1

您可以在第 34 行的#update-employee-btn 点击事件绑定之前添加 .off()。

 $("#update-employee-btn").off().click(....)

让我知道它是否也适合你。

防止函数在 java 脚本中函数的最后一条语句中调用自身

prevent function from recalling itself at the last statement of the function in java script

javascript

jquery

html

function

session-variables