表单验证保留信息

我试图保留已写入的信息，即使您在填写表单时出现错误。现在，如果您没有正确写入所有字段，则必须清理所有字段，并且必须从开始。表单验证保留信息

这是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

表单验证保留信息

回答

相关问题