Question

我开始做一个网站。我做了js之前的工作。我有一个表单，我想对其全部进行验证，我编写了用于验证的代码，但是它不显示我的验证，js控制台中没有错误。所以。

这是表格的代码；

<body>
    <div class ="container">
            <div class="card mx-auto" style="width: 30rem;">
                <div class="card-header">Register</div>
                    <div class="card-body">
            <form  name="form_register" onsubmit="return false" autocomplate="off">
                    <div class="form-group">
                            <label for="username">Username</label>
                            <input type="text" name="username" class="form-control"  id="username" placeholder="Enter username">
                            <small id="user_error" class="form-text text-muted"></small>
                          </div>
                <div class="form-group">
                  <label for="exampleInputEmail1">Email address</label>
                  <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
                  <small id="email_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Password</label>
                  <input type="password" class="form-control" id="password1" placeholder="Password">
                  <small id="pass_error" class="form-text text-muted"></small>
                </div>
                <div class="form-group">
                        <label for="exampleInputPassword2">Re-enter Password</label>
                        <input type="password" class="form-control" id="password2" placeholder="Re-enter Password">
                        <small id="pass1_error" class="form-text text-muted"></small>
                </div>
                <div class="form-group">
                        <label for="exampleFormgender">Gender</label>
                        <select class="form-control" id="gender">
                          <option>Male</option>
                          <option>Female</option>
                        </select>
                        <small id="gender_error" class="form-text text-muted"></small>
                    </div>
                 <div class="form-group">
                        <label for="exampleFormgrade">Grade</label>
                        <select class="form-control" id="grade">
                          <option>Admin</option>
                          <option>User</option>
                        </select>
                        <small id="grade_error" class="form-text text-muted"></small>
                    </div>    

                    <br/>
                        <button type="submit" name="submit" id="submit" class="btn btn-primary"><i class="fa fa-user">&nbsp;&nbsp;</i>Register</button>
                        <span><a href="index.php">Login</a></span>
            </form> 
                </div>
            </div>
      </div>
    <br/>
</body>

这是js代码。

$(document).ready(function(){
    $("#form_register").on("submit",function(){
         var status = false;
         var name = $("#username");
         var email = $("#email");
         var pass1 = $("#password1");
         var pass2 = $("#password2");
         var genderx= $("#gender");
         var type = $("#grade");
        // var n_patt = new RegExp(/^[A-Za-z]+$/);
         var e_patt = new RegExp(/^[a-z_-0-9_-]+(\.[a-z0-9_-]+)*@[a-z0-9_-]+(\.[a-z0-9_-]+)*(\.[a-z]{2,4})$/);
         if (name.val() == "" || name.val().length < 2){
             name.addClass("border-danger");
             $("user_error").html("<span class='text-danger'>Please enter the name</span>");
             status = false;
         }else{
             name.removeClass("border-danger");
             $("user_error").html("");
             status = true;
         }

    })
 })

我不知道问题出在哪里，我不知道。编写HTML代码或js可能不是很好。我真的不知道，我尝试了..我仍然在写和重写..也没什么。

此外，在头部，我放置了js（main.js）的位置以及引导程序，ajax和jquery的链接。

     <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Register</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript"src="./js/main.js"></script>


</head>

Answer 1

在Jquery中，当您使用$("#form_register")时，会因为放置了#而在id为“ form_register”的HTML上查找元素，因此表单具有该名称并不重要，如果要这样使用，它还应该有一个带有该名称的ID。

<form id="form_register" onsubmit="return false" autocomplate="off">

您的Regex也有错误，您可以在regex101之类的网络专家中进行测试。目前，我已修复了Regex上的错误，但我不知道它是否能按您的预期工作。

这是正则表达式：

^[a-z_0-9_-]+(\.[a-z0-9_-]+)*@[a-z0-9_-]+(\.[a-z0-9_-]+)*(\.[a-z]{2,4})$

JavaScript和HTML不会显示表单验证

1 个答案: