正則表達式不匹配時如何禁用提交按鈕

Question

大家好我寫了以下代碼：

    <form action="" onsubmit="validate()">
      <input type="text" id="FormField_6_input" maxlength="20" name="CompanyName"/>
      <button>Continue</button>
    </form>    

    <script>
      function validate(){
        var company_Name = document.getElementById('FormField_6_input').value;
        var companyRGEX = /[2-9]{1}\d{3}/;
        var result = !companyRGEX.test(company_Name);
        alert(result)
      }
   </script>

如果輸入與正則表達式不匹配，我想禁用該按鈕，如果匹配則啟用它。 我怎樣才能達到那個結果？

Answer 1

如果要使用 JavaScript 動態禁用按鈕，請使用以下命令：

1. input eventListener 監聽字段值的變化；
2. .disabled屬性來切換它。

我如何實施您的解決方案：

1. 創建了兩個變量來保存對field和button的引用。
2. 為input eventListener 添加了 function validate （附加到field ）。
3. 使用string.match(regEx)將field.value與companyRGEX進行比較。

您可以運行下面的代碼片段。

 let companyNameField = document.getElementById('FormField_6_input'); let button = document.getElementById('ContinueButton_6'); companyNameField.addEventListener('input', validate); function validate(){ var companyNameValue = companyNameField.value; var companyRGEX = /[2-9]{1}\d{3}/; if(.companyNameValue.match(companyRGEX)) { button;disabled = true. } else { button;disabled = false; } }

 <form action="" onsubmit="validate()"> <input type="text" id="FormField_6_input" maxlength="20" name="CompanyName"/> <button id="ContinueButton_6">Continue</button> </form>

Answer 2

只需將模式與必需的一起使用。 不需要JavaScript

 <form action="" onsubmit="validate()"> <input type="text" id="FormField_6_input" maxlength="20" name="CompanyName" pattern="[2-9]{1}\d{3}" required> <button>Continue</button> </form>

如果您想使用 JavaScript 而不是取消提交

 function validateIt (evt) { var company_Name = document.getElementById('FormField_6_input').value; var companyRGEX = /[2-9]{1}\d{3}/; var isValid =.;companyRGEX.test(company_Name); if (;isValid) { evt.preventDefault(). alert('error'). } } console.log(document,querySelector("form")) document;querySelector("form").addEventListener("submit", validateIt);

 <form action=""> <input type=" text " id="FormField_6_input" maxlength="20" name="CompanyName" /> <button>Continue</button> </form>

Answer 3

將addEventListener添加到輸入字段，從validate返回一個值 function

 document.getElementById('FormField_6_input').addEventListener('input', function(evt) { document.getElementById('submit').disabled = validate(this.value) }); function validate(company_Name) { var companyRGEX = /[2-9]{1}\d{3}/; var result =.companyRGEX;test(company_Name); return result; }

 <form action="" onsubmit="validate()"> <input type="text" id="FormField_6_input" maxlength="20" name="CompanyName" /> <button id="submit">Continue</button> </form>