jQuery通过正则验证表单

最新推荐文章于 2023-07-21 01:01:56 发布

MissGentlemen

最新推荐文章于 2023-07-21 01:01:56 发布

阅读量294

点赞数

本文链接：https://blog.csdn.net/MissGentlemen/article/details/78859538

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<style>
.div1 {
width: 600px;
border: 1px solid deepskyblue;
height: 500px;
}

.fd {
width: 575px;
margin-left: 0px;
border-bottom: none;
border-left: none;
border-right: none;
}

.lend {
margin-left: -530px;
}

.table tr {
height: 35px;
}

.btn1 {
border-radius: 5px;
background-color: #00BFFF;
}

.btn2 {
border-radius: 5px;
}
</style>
</head>

<body>
<center>
<div class="div1">
<fieldset class="fd">
<legend class="lend">注册</legend>
</fieldset>
<center>
<form>
<table class="table">
<tr>
<td>账号</td>
<td><input type="text" id="user" /><br /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" id="pwd" /><br /></td>
</tr>
<tr>
<td>重复密码</td>
<td><input type="text" id="pwd1" /><br /></td>
</tr>
<tr>
<td>昵称</td>
<td><input type="text" id="name" /><br /></td>
</tr>
<tr>
<td>出生日期</td>
<td><input type="date" id="data" /><br /></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" id="sex" />男<input type="radio" />女<br /></td>
</tr>
<tr>
<td>身份证号</td>
<td><input type="text" id="user_num" /><br /></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" id="num" /><br /></td>
</tr>
<tr>
<td>QQ</td>
<td><input type="text" id="qq" /><br /></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" id="eml" /><br /></td>
</tr>
<tr>
<td align="center"><input type="button" value="注册" class="btn1" id="btn1" /></td>
<td align="center"><input type="button" value="清空" class="btn2" id="btn2" /></td>
</tr>
</table>
</form>
</center>
</div>
</center>
<script>
if("a" in window) {
var qq = 1;
alert(qq);
}
//alert(qq);
var arr = []
var a1 = false;
var a2 = false;
var a3 = false;
var a4 = false;
var a5 = false;
var a6 = false;
var a7 = false;
var a8 = false;
$("#user").blur(function() {
var flag = /[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*/;
var flag2 = /^[!@#&*（）——+-，。、‘；《》？“：.]+$/
var user = $("#user").val();
if(!flag.test(user)) {
alert("账号必须数字或者英文不能有或特殊字符")
} else {
a1 = true;
}
})
$("#pwd").blur(function() {
var flag = /[A-Z][0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[A-Z][a-zA-Z]+[0-9]+[0-9a-zA-Z]*/
var pwd = $("#pwd").val();
if(!flag.test(pwd)) {
alert("大写+字母+数字的组合")
} else {
a2 = true;
}
})
$("#pwd1").blur(function() {
var pwd1 = $("#pwd1").val();
var pwd = $("#pwd").val();
if(pwd1 != pwd) {
alert("两次输入密码要一致")
} else {
a3 = true;
}
})
$("#name").blur(function() {
name = $("#name").val();
if(arr.length != 0) {
for(var i = 0; i < arr.length; i++) {
if(name == arr[i]) {
alert("对不起用户名存在")
return
}
}
arr.push(name)
a4 = true
} else {
arr.push(name)
a4 = true;
}
})
$("#data").blur(function() {

})
$("#user_num").blur(function() {
var user_num = $("#user_num").val();
var flag = /^\d*$/
if(!(flag.test(user_num)) || user_num.length != 18) {
alert("省份证必须纯数字并且18位")
} else {
a5 = true;
}
})
$("#num").blur(function() {
var num = $("#num").val();
var flag = /^[1]\d*$/
if(!(flag.test(num)) || num.length != 11) {
alert("手机号必须纯数字并且11位和1开头")
} else {
a6 = true;
}
})
$("#qq").blur(function() {
var qq = $("#qq").val();
var flag = /^\d*$/;
if(!(flag.test(qq)) || qq.length <= 5) {
alert("qq号必须纯数字并且大于5位")
} else {
a7 = true;
}
})
$("#eml").blur(function() {
var eml = $("#eml").val();
var flag = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
if(!flag.test(eml)) {
alert("邮箱格式不正确")
} else {
a8 = true;
}
})
$("#btn1").click(function() {
if(a1 && a2 && a3 && a4 && a5 && a6 && a7 && a8) {
alert("注册成功")
} else {
alert("注册失败")
}
})
$("#btn2").click(function() {
history.go(0)
})
</script>
</body>

</html>