表單驗證保留信息

我試圖保留已寫入的信息，即使您在填寫表單時出現錯誤。現在，如果您沒有正確寫入所有字段，則必須清理所有字段，並且必須從開始。表單驗證保留信息

這是HTML

<form class="form" method="post" action="" name="registration" onsubmit="return formValidation()" > 
       <h2>Register now for free!</h2> 
       <label for="Fname">First name :</label> 
       <input type="text" name="Fname" id="Fname" placeholder="First Name"> 
       <label for="Lname">Last name :</label> 
       <input type="text" name="Lname" id="Lname" placeholder="Last Name"> 
       <label for="email">Email :</label> 
       <input type="text" name="email" id="email" placeholder="[email protected]"> 
       <label for="password">Password :</label> 
       <input type="password" name="password" id="password" placeholder="******"> 
       <label for="cpassword">Confirm Password :</label> 
       <input type="password" name="cpassword" id="cpassword" placeholder="******"> 
       <label id="gender">Gender : </label> 
       <input type="radio" name="sex" value="male"><span>Male</span> 
       <input type="radio" name="sex" value="female"><span>Female</span><br /> 
       <input type="submit" id="submit" name="submit" value="Register"> 
      </form>

這是JavaScript

function formValidation() { 
    var fName = document.getElementById("Fname").value; 
    var lName = document.getElementById("Lname").value; 
    var email = document.getElementById("email").value; 
    var pass = document.getElementById("password").value; 
    var cpass = document.getElementById("cpassword").value; 

    if (fName_validation(fName, 20, 3)) { 
     if (lName_validation(lName, 20, 3)) { 
      if (email_validation(email)) { 
       if (pass_validation(pass, 20, 6)) { 
       } 
      } 
     } 
    } 

    function fName_validation(fName, max, min) { 
     var check_name = /^[A-Za-z\s ]{2,20}$/; 
     if (!fName.match(check_name)) { 
      alert("First name should not be empty/length be between " + max + " to " + min); 
      fName.focus(); 
      return false; 
     } 
     return true; 
    } 
    function lName_validation(lName, max, min) { 
     var check_name = /^[A-Za-z\s ]{2,20}$/; 
     if (!lName.match(check_name)) { 
      alert("Last name should not be empty/length be between " + max + " to " + min); 
      lName.focus(); 
      return ; 
     } 
     return true; 
    } 
    function email_validation(email) { 
     var checkk_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; 
     if (!email.match(checkk_email)) { 
      alert("Please enter a valid email!"); 
      email.focus(); 
      return ; 
     } 
     return true; 
    } 
    function pass_validation(pass, max, min) { 
     var check_password = /(?=.*\d)(?=.*[a-z]).{6,}/; 
     if (!pass.match(check_password)) { 
      alert("Your password should have at least one number,one letter and should be a least 6 characters!"); 
      pass.focus(); 
      return false; 
     } 
     if (pass !== cpass) { 
      alert("Password don't match!"); 
      cpass.focus(); 
      return false; 
     } 
    } 
    alert("Well Done!You successfully registered!"); 
    return true; 
}

來源

2015-06-10 plutondsn.

如何值被清除？目前的代碼沒有這樣做。目前，無論驗證結果如何，您的表單都會提交。這就是你所看到的值被清除。 – RobG

確保每個驗證方法應該返回true或false。

請修改兩處return ;到return false

來源

2015-06-10 23:38:34 user86745458

我不用JavaScript做到這一點！由於HTML5爲您完成的工作。因此有<input>屬性要求和模式。

<input type="text" pattern="[A-Za-z]{2,20}" required="" />

應該告知用戶他可以使用哪種模式。一切都很好。

Example

來源

2015-06-11 00:29:20 Sun

表單驗證保留信息

回答

相關問題