Question

问题是，一旦我点击提交按钮，但是在显示消息之后，代码对于显示验证错误非常合适..当我点击提交按钮时再次显示（无需重新加载，即错误消息）仍然在显示屏上），即使它有错误消息，它也会重定向到成功页面。

看看代码：

<form name="form1" action="success.html" onSubmit="return check(this)" method="post">
  <table cellpadding="10">
    <tr>
      <caption>FILL FORM</caption>
    </tr>
    <tr>
      <td>
        <label for="txt">Enter Username</label>
      </td>
      <td>
        <input type="text" id="txt">
        <div class="error" id="user" onBlur="username()"></div>
      </td>
    </tr>
    <tr>
      <td>
        <label for="pass">Enter Password</label>
      </td>
      <td>
        <input type="password" id="pass" onBlur="password()">
        <div class="error" id="password"></div>
      </td>
    </tr>
    <tr>
      <td>
        <label for="cpass">Confirm Password</label>
      </td>
      <td>
        <input type="password" id="cpass" onBlur="password()">
        <div class="error" id="cpassword"></div>
      </td>
    </tr>
    <tr>
      <td>
        <label for="em">Enter Email-ID</label>
      </td>
      <td>
        <input type="email" id="em" onBlur="email()">
        <div class="error" id="emailid"></div>
      </td>
    </tr>
    <tr>
      <td colspan=2>
        <button type="submit" class="btn">Submit</button>
      </td>
    </tr>
  </table>
</form>

log4j.appender.file=org.apache.log4j.rolling.RollingFileAppender
log4j.appender.file.File=/tmp/mylog.log
log4j.appender.file.ImmediateFlush=true
log4j.appender.file.threshold=INFO
log4j.appender.file.Append=true
log4j.appender.file.MaxFileSize=10MB
log4j.appender.file.MaxBackupIndex=20
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %t %c{2}:%L - %m%n 
log4j.appender.file.rollingPolicy=org.apache.log4j.rolling.TimeBasedRollingPolicy
log4j.appender.file.rollingPolicy.FileNamePattern=/tmp/mylog%d.log 
log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %t  %c{2}:%L - %m%n

谢谢

Answer 1

这是一个可以使用的代码段。

代码中存在一些问题：

在函数email()中，您要为email变量赋值。
在函数范围内创建了许多变量。
可以进行更多优化，而不是使用global函数和变量，这将使代码更具可读性和可维护性。

var flag = 0;

function username() {
  var usrn = document.form1.txt.value;
  if (usrn == "") {
    document.getElementById("user").innerHTML = "Please enter a username";
    flag = 1;
  } else if (usrn.length < 8) {
    document.getElementById("user").innerHTML = "minimum 8 characters required";
    flag = 1;
  }

}

function password() {
  var pass = document.form1.pass.value;
  var cpass = document.form1.cpass.value;
  if (pass == "") {
    document.getElementById("password").innerHTML = "Please enter a password";
    flag = 1;
  } else if (pass.length < 8) {
    document.getElementById("password").innerHTML = "minimum 8 characters required";
    flag = 1;
  } else if (cpass == "") {
    document.getElementById("cpassword").innerHTML = "Please confirm password";
    flag = 1;
  } else if (cpass != pass) {
    document.getElementById("cpassword").innerHTML = "passwords do not match";
    flag = 1;
  } else
    return;
}

function cpassword() {
  var cpass = document.form1.cpass.value;
  var pass = document.form1.pass.value;
  if (cpass == "") {
    document.getElementById("cpassword").innerHTML = "Please confirm password";
    flag = 1;
  } else if (cpass != pass) {
    document.getElementById("cpassword").innerHTML = "passwords do not match";
    flag = 1;
  } else
    return;
}

function email() {
  var emailValue = document.form1.em.value;
  if (emailValue == "") {
    document.getElementById("emailid").innerHTML = "Please enter Email-ID";
    flag = 1;
  }
}

function check(form) {
  flag = 0;
  username();
  password();
  email();
  if (flag == 1) {
    console.log("False");
    return false;
  } else {
    console.log("True");
    return true;
  }
}

<form name="form1" action="success.html" onsubmit="return check(this)" method="post">
  <table cellpadding="10">
    <tr>
      <caption>FILL FORM</caption>
    </tr>
    <tr>
      <td>
        <label for="txt">Enter Username</label>
      </td>
      <td>
        <input type="text" id="txt">
        <div class="error" id="user" onBlur="username()"></div>
      </td>
    </tr>
    <tr>
      <td>
        <label for="pass">Enter Password</label>
      </td>
      <td>
        <input type="password" id="pass" onBlur="password()">
        <div class="error" id="password"></div>
      </td>
    </tr>
    <tr>
      <td>
        <label for="cpass">Confirm Password</label>
      </td>
      <td>
        <input type="password" id="cpass" onBlur="password()">
        <div class="error" id="cpassword"></div>
      </td>
    </tr>
    <tr>
      <td>
        <label for="em">Enter Email-ID</label>
      </td>
      <td>
        <input type="email" id="em" onBlur="email()">
        <div class="error" id="emailid"></div>
      </td>
    </tr>
    <tr>
      <td colspan=2>
        <button type="submit" class="btn">Submit</button>
      </td>
    </tr>
  </table>
</form>

Answer 2

每当有验证错误时。从函数返回false。它应该解决这个问题。

Javascript表单验证提交按钮问题

2 个答案: