Javascript/JQuery - 自定义表单验证脚本在每秒提交时错误地抛出验证错误

Question

我在 JS/JQuery 中为我的项目制作了一个表单验证脚本，但是当我想第二次提交填写的表单时(当我第二次单击“提交”按钮时)我遇到了问题，而且每一次(单击提交第 4 次、第 6 次、第 8 次...)。当我点击第 1 次、第 3 次、第 5 次...时，它通常会验证并且没有错误。

我尝试更改错误变量(使用真/假、1/0、"is"/“否”)、if/else 语句，但似乎没有任何效果。每次我得到相同的结果。

$(document).ready(function() {

    var newHieroglyphCodeRegex = /^((?!Aa\d)(?:[A-Z][a-z]{1,3})[1-9][0-9]{0,2}[a-zA-Z]?)$/g;

    $("#js-new-hieroglyph-code-form").submit(function(e){
        e.preventDefault();

        var inputNewHieroglyphCodeValue = $("#js-new-hieroglyph-code-input").val().trim();
        console.log(inputNewHieroglyphCodeValue);
        var newHieroglyphCodeInputNumberError;
        var newHieroglyphCodeInputFormatError;
        var newHieroglyphCodeInputError;

        if (inputNewHieroglyphCodeValue.length >= 3) {
            newHieroglyphCodeInputNumberError = "no";
        } else {
            newHieroglyphCodeInputNumberError = "yes";
        }

        if (newHieroglyphCodeRegex.test(inputNewHieroglyphCodeValue) === true) {
            var newHieroglyphCodeInputFormatError = "no";
        } else {
            var newHieroglyphCodeInputFormatError = "yes";
        }

        if (newHieroglyphCodeInputNumberError == "no" && newHieroglyphCodeInputFormatError == "no") {
            newHieroglyphCodeInputError = "no";
        } else {
            newHieroglyphCodeInputError = "yes";
        }

        if (newHieroglyphCodeInputError == "yes") {
            if (newHieroglyphCodeInputNumberError == "yes") {
                $("#js-new-hieroglyph-code-input").css("border-color", "rgb(190,115,110)");
                $("#js-new-hieroglyph-code-input-error-div").css("display", "flex");
                var errorMessage = "<div class='error-message error-pointer'><p>Code must have at least 3 characters.</p></div>";
                $("#js-new-hieroglyph-code-input-error-div").html(errorMessage);
            } else {
                $("#js-new-hieroglyph-code-input").css("border-color", "rgb(190,115,110)");
                $("#js-new-hieroglyph-code-input-error-div").css("display", "flex");
                var errorMessage = "<div class='error-message error-pointer'><p>Code has invalid formatting or characters.</p></div>";
                $("#js-new-hieroglyph-code-input-error-div").html(errorMessage);
            }  
        } else {
            var errorMessage = "<div class='success-message'><p>Looking good!</p></div>";
            $("#js-new-hieroglyph-code-input-error-div").html(errorMessage);
            $("#js-new-hieroglyph-code-input-error-div").css("display", "none");
            $("#js-new-hieroglyph-code-input").css("border-color", "rgb(95,160,95)");
            $.ajax({
                url : "./includes/individual_insert_scripts/insert_new_hieroglyph_code.script.php",
                method : "POST",
                data : {
                    inputNewHieroglyphCodeValue : inputNewHieroglyphCodeValue,
                    submit : 1
                },
                success : function(data) {
                    $("#js-new-hieroglyph-code-success-message-wrapper").html(data);
                }
            });
        }
    }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="js-new-hieroglyph-code-form" class="form-content-holder" method="POST" action="" autocomplete="off" novalidate accept-charset="UTF-8">
   <!-- NEW HIEROGLYPH CODE -->
   <div class="form-section">
      <div class="basic-form-element-container-narrow">
         <!-- Label for form field -->
         <label for="js-new-hieroglyph-code-input">New hieroglyph code</label>
         <div class="form-input-info-wrapper">
            <div class="form-input-wrapper">
               <!-- Form input field -->
               <input id="js-new-hieroglyph-code-input" name="new-hieroglyph-code-input" type="text">
               <!-- DIV for error message -->   
               <div id="js-new-hieroglyph-code-input-error-div" class="validation-message-div">
                  <!-- Wrong formatting. -->
                  <!-- Code already exists. -->
                  <!-- Looking good! -->
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- SUCCESS MESSAGE -->
   <div id="js-new-hieroglyph-code-success-message-wrapper" class="insert-success-message-wrapper">
      <!-- You successfully added new hieroglyph code. Proceed to this <a href="./new_hieroglyph.php">page</a> to add new hieroglyph to the database. -->
   </div>
   <!-- SUBMIT BUTTON -->
   <div class="form-submit-button-wrapper">
      <button id="js-new-hieroglyph-code-submit-button" name="new-hieroglyph-code-submit-button" class="default-button" type="submit">Submit!</button>
   </div>
</form>

错误如下:

Answer 1

这里的问题是您在函数外部使用全局标志定义 regex 模式，这意味着每隔一次尝试它都会尝试在先前找到的匹配项的索引之后找到匹配项。你可以阅读它here .

var newHieroglyphCodeRegex = /^((?!Aa\d)(?:[A-Z][a-z]{1,3})[1-9][0-9]{0,2}[a-zA-Z]?)$/g;
var inputValue = "Ag5";
console.log("Global flag: " + newHieroglyphCodeRegex.test(inputValue));
console.log("Global flag: " + newHieroglyphCodeRegex.test(inputValue));

newHieroglyphCodeRegex = /^((?!Aa\d)(?:[A-Z][a-z]{1,3})[1-9][0-9]{0,2}[a-zA-Z]?)$/;
console.log("No global flag: " + newHieroglyphCodeRegex.test(inputValue));
console.log("No global flag: " + newHieroglyphCodeRegex.test(inputValue));

简单的解决方案是将变量定义移到提交函数中或删除 g 标志。此外，我建议使用更简单的变量名称并将 yes/no 值更改回 true/false 以获得更清晰的代码。

$(document).ready(function() {

    $("#js-new-hieroglyph-code-form").submit(function(e) {
        e.preventDefault();
        var newHieroglyphCodeRegex = /^((?!Aa\d)(?:[A-Z][a-z]{1,3})[1-9][0-9]{0,2}[a-zA-Z]?)$/g;
        
        var inputValue = $("#js-new-hieroglyph-code-input").val().trim();
        var numberError;
        var formatError;
        var error;

        if (inputValue.length >= 3) {
            numberError = "no";
        } else {
            numberError = "yes";
        }
        var regexResult = newHieroglyphCodeRegex.test(inputValue);
        console.log(regexResult);
        if (regexResult) {
            formatError = "no";
        } else {
            formatError = "yes";
        }

        if (numberError == "no" && formatError == "no") {
            error = "no";
        } else {
            error = "yes";
        }

        if (error == "yes") {
            if (numberError == "yes") {
                $("#js-new-hieroglyph-code-input").css("border-color", "rgb(190,115,110)");
                $("#js-new-hieroglyph-code-input-error-div").css("display", "flex");
                var errorMessage = "<div class='error-message error-pointer'><p>Code must have at least 3 characters.</p></div>";
                $("#js-new-hieroglyph-code-input-error-div").html(errorMessage);
            } else {
                $("#js-new-hieroglyph-code-input").css("border-color", "rgb(190,115,110)");
                $("#js-new-hieroglyph-code-input-error-div").css("display", "flex");
                var errorMessage = "<div class='error-message error-pointer'><p>Code has invalid formatting or characters.</p></div>";
                $("#js-new-hieroglyph-code-input-error-div").html(errorMessage);
            }
        } else {
            var errorMessage = "<div class='success-message'><p>Looking good!</p></div>";
            $("#js-new-hieroglyph-code-input-error-div").html(errorMessage);
            $("#js-new-hieroglyph-code-input-error-div").css("display", "none");
            $("#js-new-hieroglyph-code-input").css("border-color", "rgb(95,160,95)");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="js-new-hieroglyph-code-form" class="form-content-holder" method="POST" action="" autocomplete="off" novalidate accept-charset="UTF-8">
   <!-- NEW HIEROGLYPH CODE -->
   <div class="form-section">
      <div class="basic-form-element-container-narrow">
         <!-- Label for form field -->
         <label for="js-new-hieroglyph-code-input">New hieroglyph code</label>
         <div class="form-input-info-wrapper">
            <div class="form-input-wrapper">
               <!-- Form input field -->
               <input id="js-new-hieroglyph-code-input" name="new-hieroglyph-code-input" type="text">
               <!-- DIV for error message -->   
               <div id="js-new-hieroglyph-code-input-error-div" class="validation-message-div">
                  <!-- Wrong formatting. -->
                  <!-- Code already exists. -->
                  <!-- Looking good! -->
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- SUCCESS MESSAGE -->
   <div id="js-new-hieroglyph-code-success-message-wrapper" class="insert-success-message-wrapper">
      <!-- You successfully added new hieroglyph code. Proceed to this <a href="./new_hieroglyph.php">page</a> to add new hieroglyph to the database. -->
   </div>
   <!-- SUBMIT BUTTON -->
   <div class="form-submit-button-wrapper">
      <button id="js-new-hieroglyph-code-submit-button" name="new-hieroglyph-code-submit-button" class="default-button" type="submit">Submit!</button>
   </div>
</form>