当我开始做一个网站时。我做了我到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"> </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
)的位置和bootstrap、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>
发布于 2018-10-16 04:03:10
在Jquery中,当你使用$("#form_register")
时,它会在你的超文本标记语言中查找id为"form_register“的元素,因为你放置了一个#
,不管你的表单有没有这个名字,如果你想这样使用,它也应该有一个具有这个名字的id。
<form id="form_register" onsubmit="return false" autocomplate="off">
你的正则表达式也有一个错误,你可以在一些网站上测试它,比如regex101。我目前修复了你的正则表达式上的错误,但我不知道它是否如你所期望的那样工作。
下面是Regex:
^[a-z_0-9_-]+(\.[a-z0-9_-]+)*@[a-z0-9_-]+(\.[a-z0-9_-]+)*(\.[a-z]{2,4})$
https://stackoverflow.com/questions/52823811
复制相似问题