Question

我正在尝试使用javascript验证进行注册表单，但错误消息只会闪烁一秒。

我尝试搜索其他类似的问题，但我找不到答案......

这是我的表单代码

<form method="post" name="signupForm">
    <div id="signup-form" class="col-md-12 col-sm-12 col-xs-12">
        <span id="error"></span>
        <div class="form-group" id="inputFirst">
            <label for="firstname">First Name:</label>
            <input class="form-control" type="text" name="first_name" id="firstname" placeholder="John" value="">
        </div>

        <div class="form-group" id="inputLast">
            <label for="lastname">Last Name:</label>
            <input class="form-control" type="text" name="last_name" id="lastname" placeholder="Doe" value="">
        </div>

        <div class="form-group" id="inputEmail">
            <label for="signup_email">Email Address:</label>
            <input class="form-control" type="email" id="signup_email" name="email" placeholder="example@gmail.com" value="">
        </div>

        <div class="form-group" id="inputPassword">
            <label for="user_password">Password:</label>
            <input class="form-control" type="password" id="user_password" name="password" placeholder="Create a Password">
        </div>
        <button type="submit" onclick="validateForm()" class="btn button">Sign Up</button>

    </div>
</form>

这是我的验证功能

function validateForm() {
        var first= document.forms["signupForm"]["firstname"].value;
        var last = document.forms["signupForm"]["lastname"].value;
        var email= document.forms["signupForm"]["email"].value;
        var pass = document.forms["signupForm"]["password"].value;
        var msg = "";
        var valid= true;

        checkname = /[A-z]/;
        checkemail= /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

        if(!/\w/.test(pass))
        {
            msg="Password can only contain [a-z, A-Z, 0-9, _ (underscore)]";
            valid= false;
        }
        if(!checkemail.test(email))
        {
            msg="Email address Invalid";
            valid= false;
        }
        if(!checkname.test(first))
        {
            msg="First and Last Name can only contain alphabets";
            valid= false;
        }
        if(first==="" && last==="" && email==="" && pass==="")
        {
            msg="Please fill every field given below";
            valid= false;
        }
        document.getElementById("error").innerHTML = msg;
        return valid;

    }

Answer 1

你应该使用return validateForm()，这样当validateForm返回false时，它将阻止表单提交。

function validateForm() {
  var first= document.forms["signupForm"]["firstname"].value;
  var last = document.forms["signupForm"]["lastname"].value;
  var email= document.forms["signupForm"]["email"].value;
  var pass = document.forms["signupForm"]["password"].value;
  var msg = "";
  var valid= true;
debugger;
  checkname = /[A-z]/;
  checkemail= /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

  if(!/\w/.test(pass))
  {
    msg="Password can only contain [a-z, A-Z, 0-9, _ (underscore)]";
    valid= false;
  }
  if(!checkemail.test(email))
  {
    msg="Email address Invalid";
    valid= false;
  }
  if(!checkname.test(first))
  {
    msg="First and Last Name can only contain alphabets";
    valid= false;
  }
  if(first==="" && last==="" && email==="" && pass==="")
  {
    msg="Please fill every field given below";
    valid= false;
  }
  document.getElementById("error").innerHTML = msg;
  return valid;

}

<form method="post" name="signupForm">
    <div id="signup-form" class="col-md-12 col-sm-12 col-xs-12">
        <span id="error"></span>
        <div class="form-group" id="inputFirst">
            <label for="firstname">First Name:</label>
            <input class="form-control" type="text" name="first_name" id="firstname" placeholder="John" value="">
        </div>

        <div class="form-group" id="inputLast">
            <label for="lastname">Last Name:</label>
            <input class="form-control" type="text" name="last_name" id="lastname" placeholder="Doe" value="">
        </div>

        <div class="form-group" id="inputEmail">
            <label for="signup_email">Email Address:</label>
            <input class="form-control" type="email" id="signup_email" name="email" placeholder="example@gmail.com" value="">
        </div>

        <div class="form-group" id="inputPassword">
            <label for="user_password">Password:</label>
            <input class="form-control" type="password" id="user_password" name="password" placeholder="Create a Password">
        </div>
        <button type="submit" onclick="return validateForm()" class="btn button">Sign Up</button>

    </div>
</form>

Answer 2

您的表单可能仍在提交，因为您没有停止提交表单。您的事件处理程序在提交按钮上是“onClick”。这不一定会停止表格。

您只能看到错误消息，因为该页面会重新加载整页。

您的验证功能应该绑定到“onSubmit”事件。

beginnerProgram

错误消息仅闪烁一秒钟

2 个答案: