在电子邮件字段中使用Javascript进行表单验证时出错

时间：2017-07-31 15:07:15

标签： javascript html 

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <link rel = "stylesheet" type = "text/css" href = "form.css" />
<script>
function validateForm() {
    var x = document.forms["myForm"]["email"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>

</head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
    <div class="container">
    <h2><center>SignUp</center></h2>
    <div class="form-group">
       <label><b>Email</b></label>
       <input type="text" class="form-control" placeholder="Enter Email" name="email">
     </div>
    <div class="form-group">
        <label><b>User Name</b></label>
       <input type="text" class="form-control" placeholder="Enter User Name" name="userid" required>
    </div>
    <div class="form-group">
        <label><b>Password</b></label>
       <input type="password" class="form-control" placeholder="Enter Password" name="pwd" required>
    </div>
    <div class="form-group">
        <label><b>Re-enter Password</b></label>
       <input type="password" class="form-control" placeholder="Re-Enter Password" name="pwd1" required>
    </div>
    <div class="form-group">
        <label><b>Enter DOB</b></label>
       <input type="date" class="form-control" name="dob" required>
    </div>
    
      <input type="reset" class="cancelbtn" value="Reset">
      <input type="submit" class="signupbtn" value="Submit">
    
    </div>   
    

</form>
</body>
</html>

我尝试过初级javascript验证，以确保电子邮件字段不能留空。但是，在运行代码时，不会对电子邮件字段执行验证。也就是说，不会出现弹出窗口，直接显示userid的必需属性。任何人都可以指出代码中的错误吗？

4 个答案:

答案 0 :(得分：0)

在required输入框中，您没有提到required条件，因此如果您尝试在不输入任何值的情况下提交，则会提交表单。

如果您不想这样，则需要添加<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel = "stylesheet" type = "text/css" href = "form.css" /> <script> function validateForm() { var x = document.forms["myForm"]["email"].value; if (x == "") { alert("Name must be filled out"); return false; } } </script> </head> <body> <form name="myForm" onsubmit="return validateForm()" method="post"> <div class="container"> <h2><center>SignUp</center></h2> <div class="form-group"> <label><b>Email</b></label> <input type="text" class="form-control" placeholder="Enter Email" name="email" required> </div> <div class="form-group"> <label><b>User Name</b></label> <input type="text" class="form-control" placeholder="Enter User Name" name="userid" required> </div> <div class="form-group"> <label><b>Password</b></label> <input type="password" class="form-control" placeholder="Enter Password" name="pwd" required> </div> <div class="form-group"> <label><b>Re-enter Password</b></label> <input type="password" class="form-control" placeholder="Re-Enter Password" name="pwd1" required> </div> <div class="form-group"> <label><b>Enter DOB</b></label> <input type="date" class="form-control" name="dob" required> </div> <input type="reset" class="cancelbtn" value="Reset"> <input type="submit" class="signupbtn" value="Submit"> </div> </form> </body> </html>。

＆＃13;
＆＃13; 
FILES_${PN}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您已在除电子邮件字段之外的每个字段上添加 HTML5 验证。

看这里：

placeholder="Enter User Name" name="userid" required>
                                            ^^^ this require attribute

首先，您的 HTML5 验证将会执行，之后 javascript 将有效。

required属性在 HTML5 中进行验证，大多数浏览器都支持该属性。

要检查您的javascript，请首先填写除电子邮件字段之外的表单，之后警报将有效。

答案 2 :(得分：0)

标准HTML5验证始终在表单提交之前执行。这意味着如果该验证失败，即您的任何必填字段没有有效值，则永远不会触发submit事件，并且您的自定义验证根本不会运行。

这是有道理的，因为如果表单尚未准备好开始提交，为什么需要运行自定义验证呢？

换句话说，您的代码中没有错误，它的行为符合预期 如果您始终希望自定义验证运行，则需要删除所有其他字段上的required属性，以便不进行标准验证，而是在自定义验证中验证这些字段。

答案 3 :(得分：0)

首先，您应该在<body>部分的末尾包含JS代码，而不是<head>。

其次，您应该使用jQuery来执行仅包含正文末尾的CDN资源链接。你可以在这里看到非常简单：

＆＃13;
＆＃13; 
<html>
<head>
</head>

<body>
  <form id="myForm" action="" method="POST">
    Email
    <input type="text" id="email">
    <button type="submit">Submit</button>
  </form>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $('#myForm').on('submit', function(e) {
    e.preventDefault();
    var email = $('#email').val();

    if(email == '') 
      alert('Fill the email');
    else
      this.submit();
    });
  </script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

或者只是调整你的：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <link rel = "stylesheet" type = "text/css" href = "form.css">

</head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
    <div class="container">
    <h2><center>SignUp</center></h2>
    <div class="form-group">
       <label><b>Email</b></label>
       <input type="text" class="form-control" placeholder="Enter Email" name="email" id="email">
     </div>
    <div class="form-group">
        <label><b>User Name</b></label>
       <input type="text" class="form-control" placeholder="Enter User Name" name="userid" required>
    </div>
    <div class="form-group">
        <label><b>Password</b></label>
       <input type="password" class="form-control" placeholder="Enter Password" name="pwd" required>
    </div>
    <div class="form-group">
        <label><b>Re-enter Password</b></label>
       <input type="password" class="form-control" placeholder="Re-Enter Password" name="pwd1" required>
    </div>
    <div class="form-group">
        <label><b>Enter DOB</b></label>
       <input type="date" class="form-control" name="dob" required>
    </div>

      <input type="reset" class="cancelbtn" value="Reset">
      <input type="submit" class="signupbtn" value="Submit">

    </div>   
  <script>
  function validateForm() {
      document.querySelector('form').addEventListener('submit', function(e) {
        e.preventDefault();
      });
      var x = document.getElementById('email').value;
      if (x == "") {
          alert("Name must be filled out");
          return false;
      }
  }
  </script>

</form>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

祝你好运！

相关问题
最新问题