简单的jQuery表单验证失败
刚自学jQuery进行表单验证 就第一个用户名就失败了 按钮提交后直接就跳转了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册账号</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">
$(function () {
//给注册绑定单击事件
$("#sub_btn").click(function () {
//获取用户输入框内容
var usernameText = $("#username").val();
//创建正则表达式
var usernamePatt = /^\w{5,12}$/;
if (!usernamePatt.test(usernameText)){
$("span.errorMsg").text("用户名不合法");
return false;
}
$("span.errorMsg").text("");
});
});
</script>
</style>
</head>
<body>
<div class="form" id="center">
<form action="http://localhost:8080">
<label>用户名称:</label>
<input class="itxt" type="text" name="username" placeholder="请输入用户名" autocomplete="off" >
<span class="errorMsg"></span><br>
<label>用户密码:</label>
<input type="password" name="password" placeholder="请输入密码"><br>
<label>确认密码:</label>
<input type="password" name="repassword" placeholder="请再次输入密码"><br>
<label>电子邮件:</label>
<input type="text" name="email" placeholder="请输入电子邮件"><br>
<label>验证码:</label>
<input type="text" id="code" placeholder="请输入验证码"><br>
<input type="submit" id="sub_btn" value="注册">
</form>
</div>
</body>
</html>
你的代码有两个问题：
1.style标签不完整
2.用户名称的输入框未加id，而jquery获取的时候使用的是id选择器；
附修改后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册账号</title>
<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<style></style>
</head>
<body>
<div class="form" id="center">
<form action="http://localhost:8080">
<label>用户名称:</label>
<input class="itxt" type="text" id="username" name="username" placeholder="请输入用户名" autocomplete="off">
<span class="errorMsg"></span><br>
<label>用户密码:</label>
<input type="password" name="password" placeholder="请输入密码"><br>
<label>确认密码:</label>
<input type="password" name="repassword" placeholder="请再次输入密码"><br>
<label>电子邮件:</label>
<input type="text" name="email" placeholder="请输入电子邮件"><br>
<label>验证码:</label>
<input type="text" id="code" placeholder="请输入验证码"><br>
<input type="submit" value="注册" id="sub_btn">
</form>
</div>
<script type="text/javascript">
$(function () {
//给注册绑定单击事件
$("#sub_btn").click(function () {
//获取用户输入框内容
var usernameText = $("#username").val();
//创建正则表达式
var usernamePatt = /^\w{5,12}$/;
if (!usernamePatt.test(usernameText)) {
$("span.errorMsg").text("用户名不合法");
return false;
}
$("span.errorMsg").text("");
});
});
</script>
</body>
</html>效果：
搜索一下onsubmit
需要阻止下表单默认事件