记录一次JQuery表单效验
程序员文章站
2022-06-13 21:04:16
...
记录一次JQuery的方式来实现表单效验
步骤
1. 创建一个html，包含表单元素
2. 给用户名和密码绑定失去焦点事件
3. 事件触发获取输入框内容，通过正则判断内容是否符合格式
4. 根据判断结果给出相应提示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单效验</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
var usernameFlag =false;
var passwordFlag =false;
function fun() {
return usernameFlag&&passwordFlag;
}
$(function () {
//事件触发获取输入框内容，通过正则判断内容是否符合格式
$("#username").blur(function () {
//获取文本框中的value
var username = $("#username").val();
//利用正则判断是否符合条件
if (username.match(/^[a-z0-9_-]{3,16}$/)) {
//符合条件,追加写入提示信息
$("#usernameid").html("<font style='color: green'>用户名符合</font>");
usernameFlag=true;
} else {
//不符合条件,提示用户重新输入
$("#usernameid").html("<font style='color: red'>用户格式不符合</font>");
usernameFlag=false;
}
});
//判断密码
$("#password").blur(function () {
//获取文本框中的value
var password = $("#password").val();
//利用正则判断是否符合条件
if (password.match(/^[a-z0-9_-]{6,18}$/)) {
passwordFlag=true;
} else {
passwordFlag=false;
}
});
})
</script>
</head>
<body>
<!--form表单-->
<form action="" method="get" onsubmit="return fun()">
<!--简单的使用表格,美观一点-->
<table>
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username"><span id="usernameid"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password"><span id="passwordid"></span></td>
</tr>
</table>
<input type="submit" value="点我" id="but1">
</form>
</body>
</html>