<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.0.js"></script>
<script>
$(function () {
var username_flag = false;
var password_flag = false;
$("[name=username]").blur(function () {
var usernameValue = $(this).val();
//判空
if (usernameValue == null || usernameValue == "") {
$("#span1").text("账号不能为空");
} else {
//判长度
if (usernameValue.length < 8) {
$("#span1").text("账号不能少于8位");
} else {
//判内容
var rule = /^\d*$/;
if (rule.test(usernameValue)) {
$("#span1").text("账号不是纯数字");
} else {
$("#span1").text("√");
username_flag = true;
}
}
}
});
$("[name=password]").blur(function () {
var passwordValue = $(this).val();
//判空
if (passwordValue == null || passwordValue == "") {
$("#span2").text("账号不能为空");
} else {
//判长度
if (passwordValue.length < 8) {
$("#span2").text("账号不能少于8位");
} else {
//判内容
var rule = /^\d*$/;
if (rule.test(passwordValue)) {
$("#span2").text("账号不是纯数字");
} else {
$("#span2").text("√");
password_flag = true;
}
}
}
});
$("form").submit(function(){
if(username_flag && password_flag){
alert("提交成功")
return true;
}else{
alert("数据有误!")
return false;
}
});
});
</script>
</head>
<body>
<form>
用户名:<input type="text" name="username"><span id="span1"></span><br>
密码:<input type="text" name="password"><span id="span2"></span><br>
<input type="submit" value="登录">
</form>
</body>
</html>
jQuery提交表单数据校验
最新推荐文章于 2024-09-08 21:45:17 发布