通過自定義屬性進行表單驗證

Question

請幫助我通過輸入標籤的自定義屬性進行驗證（在我的情況下：驗證）。幫助我改變我的代碼，使它變得更加動態和可重用。

var validation = function validation(){// out of grid - rename js name 
 

 
     //validate first name - only letters 
 
     var only_letters = /^[A-Za-z]+$/;// allow only letters 
 

 
     if(firstName.value.length === 0){ 
 
      document.getElementsByClassName("error")[0].innerHTML="First Name is required"; 
 
      formIsValid = false; 
 
     } 
 
     else 
 
     if(firstName.value.match(only_letters)){ 
 
      document.getElementsByClassName("error")[0].innerHTML=""; 
 
     } 
 
     else{ 
 
      document.getElementsByClassName("error")[0].innerHTML="Only characters allowed"; 
 
      formIsValid = false; 
 
     } 
 

 
     //validate email 
 

 
     var email_letters = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
 

 
     if(email.value.length === 0){ 
 
      document.getElementsByClassName("error")[2].innerHTML="Email is required"; 
 
      formIsValid = false; 
 
     } 
 
     else 
 
     if(email.value.match(email_letters)){ 
 
      document.getElementsByClassName("error")[2].innerHTML=""; 
 
     } 
 
     else{ 
 
      document.getElementsByClassName("error")[2].innerHTML="Incorrect email format"; 
 
      formIsValid = false; 
 
     }

<form id="user_form" method="post"> 
 

 
    <p> <input type="text" name="first_name" id="first_name" placeholder="First Name" validation="isRequired, correctFormat" /></p> 
 
    <span class="error"></span> 
 
<p><input type="text" name="email" id="email" autocomplete="off" placeholder="Email" validation="isRequired, correctFormat" /></p> 
 
<span class="error"></span> 
 
    </form>

Answer 1

那麼，如果你看起來真的很細心，你還挺只有一個方法，它的本質。 創建一個獲取元素，正則表達式，響應容器並返回字符串的方法。

這將是這個樣子：

function validateMePls(var field, var regex, var placeholder){ 
    var isValid = ""; 
    /** do all your checks here (length, regex, etc), appending 'isValid', then return it at the end */ 
}; 

var isValid = validateMePls(email, email_letters, document.getElementsByClassName("error")[2]); 

/** and now you check 'isValid' for something in it, so you know if you have an error or not */ 

這基本上是你的代碼的優化版本會怎麼看。

對不起，'接近Java'的代碼，但我最近沒有做任何Javascript。

祝你好運。

Answer 2

你可以在invalid事件利用placeholder屬性，required屬性，setCustomValidity()設置爲placeholder

var inputs = document.querySelectorAll("input:not([type=submit])"); 
 
for (var i = 0; i < inputs.length; i++) { 
 
    inputs[i].oninvalid = function(e) { 
 
    e.target.setCustomValidity(e.target.placeholder) 
 
    } 
 
}

<form id="user_form" method="post"> 
 

 
    <label for="first_name"> 
 
    <input type="text" pattern="[a-zA-Z]+$" name="first_name" id="first_name" placeholder="Input letters a-z A-Z" required /> 
 
    </label> 
 
    <br> 
 

 
    <label for="email"> 
 
    <input type="email" name="email" id="email" autocomplete="off" placeholder="Valid Email is required" required /> 
 
    </label> 
 
    <br> 
 
    <input type="submit" /> 
 
</form>