Question

提交空白表格时，我会收到相应的错误，但是我想在继续下一个输入时删除错误（当它们符合要求时）。任何人也可以给我一个在循环帮助下执行相同操作的解决方案。请只使用JavaScript解决方案。

这是我的JS和HTML代码。

 function validate() {
  var letter = /[a-zA-Z]/;
  var number = /[1-9]{1}[0-9]{2}/;
  var mail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
  var valid = true;

  var firstname = information.first.value;
  var lastname = information.last.value;
  var address = information.Add.value;
  var email = information.Email.value;
  var pass = information.Pass.value;
  var re_pass = information.Repass.value;
  var phone = information.mobile.value;


  if (firstname === "" || !letter.test(firstname)) {
    document.getElementById("fn").innerHTML = "*Enter your First Name*";
    console.log("first");
    valid = false;
  } else {
    document.getElementById("fn").innerHTML = "";
  }
  if (lastname === "" || !letter.test(lastname)) {
    document.getElementById("ln").innerHTML = "*Enter your Last Name*";
    console.log("last");
    valid = false;
  } else {
    document.getElementById("ln").innerHTML = "";
  }
  if (email === "" || !mail.test(email)) {
    document.getElementById("mail").innerHTML = "*Enter your Email*";
    console.log("mail");
    valid = false;
  } else {
    document.getElementById("mail").innerHTML = "";
  }
  if (pass === "" || !letter.test(Pass)) {
    document.getElementById("pwd").innerHTML = "*Enter your Password*";

    console.log("password");
    valid = false;
  } else {
    document.getElementById("pwd").innerHTML = "";
  }
  if (re_pass === "" || re_pass != pass) {
    document.getElementById("repass").innerHTML = "*Password didn't match*";
    console.log("reenter");
    valid = false;
  } else {
    document.getElementById("repass").innerHTML = "";
  }
  if (phone == "" || !number.test(phone)) {
    document.getElementById("no").innerHTML = "*Enter your Phone number";
    console.log("phone");
    valid = false;
  } else {
    document.getElementById("no").innerHTML = "";
  } 
  return valid;
}

<!DOCTYPE html>
<html>

<head>
  <title>information</title>
  <link rel="stylesheet" type="text/css" href="info.css">
  <script type="text/javascript" src="info.js"></script>
</head>

<body>
  <div id="form">
    <form action="#" method="POST" onsubmit="return validate()" name="information">
      <label>Firstname:</label>
      <input type="text" name="firstname" placeholder="Enter your name" id="first" autofocus>
      <span id="fn"></span><br><br>
      <label>Lastname:</label>
      <input type="text" name="lastname" placeholder="Enter last name" id="last">
      <span id="ln"></span><br><br>
      <label>Address:</label>
      <input type="text" name="address" placeholder="Address" id="Add">
      <span id="add"></span><br><br>
      <label>Email:</label>
      <input type="email" name="mail" placeholder="Email" id="Email">
      <span id="mail"></span><br><br>
      <label>Password:</label>
      <input type="password" name="password" placeholder="Password" id="Pass">
      <span id="pwd"></span><br><br>
      <label>Retype Password:</label>
      <input type="password" name="retype" placeholder="Retype password" id="Repass">
      <span id="repass"></span><br><br>
      <label>Phone:</label>
      <input type="text" name="firstname" placeholder="XXXXXXXXXX" id="mobile" maxlength = "10">
      <span id="no"></span><br><br>
      <input type="submit" name="submit" value="submit">
    </form>
  </div>
</body>
</html>

Answer 1

也许是这样吗？

var letter = /[a-zA-Z]/;
var number = /[1-9]{1}[0-9]{2}/;
var mail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;


function validate() {
  var information = document.querySelector("#form>form");
  var error = 0;

  var firstname = information.first.value;
  var lastname = information.last.value;
  var address = information.Add.value;
  var email = information.Email.value;
  var pass = information.Pass.value;
  var re_pass = information.Repass.value;
  var phone = information.mobile.value;


  error += firstname === "" || !letter.test(firstname)
  document.getElementById("fn").innerHTML = error?"*Enter your First Name*":"";


  error += lastname === "" || !letter.test(lastname)
  document.getElementById("ln").innerHTML = error?"*Enter your Last Name*":"";

  error += email === "" || !mail.test(email)
  document.getElementById("mail").innerHTML = error?"*Enter your Email*":"";

  error += pass === "" || !letter.test(Pass)
  document.getElementById("pwd").innerHTML = error?"*Enter your Password*":"";

  error += re_pass === "" || re_pass !== pass
  document.getElementById("repass").innerHTML = error?"*Password didn't match*":"";

  error += phone === "" || !number.test(phone)
  document.getElementById("no").innerHTML = error ? "*Enter your Phone number":"";

  return error>0?false:true;
}
document.querySelector("#form>form").oninput = validate;
document.querySelector("#form>form").onsubmit = validate;

<div id="form">
  <form action="#" method="POST" name="information">
    <label>Firstname:</label>
    <input type="text" name="firstname" placeholder="Enter your name" id="first" autofocus>
    <span id="fn"></span><br><br>
    <label>Lastname:</label>
    <input type="text" name="lastname" placeholder="Enter last name" id="last">
    <span id="ln"></span><br><br>
    <label>Address:</label>
    <input type="text" name="address" placeholder="Address" id="Add">
    <span id="add"></span><br><br>
    <label>Email:</label>
    <input type="email" name="mail" placeholder="Email" id="Email">
    <span id="mail"></span><br><br>
    <label>Password:</label>
    <input type="password" name="password" placeholder="Password" id="Pass">
    <span id="pwd"></span><br><br>
    <label>Retype Password:</label>
    <input type="password" name="retype" placeholder="Retype password" id="Repass">
    <span id="repass"></span><br><br>
    <label>Phone:</label>
    <input type="text" name="firstname" placeholder="XXXXXXXXXX" id="mobile" maxlength="10">
    <span id="no"></span><br><br>
    <input type="submit" name="mysubmit" value="submit">
  </form>
</div>

现场明智的形式验证

1 个答案: