<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/jquery-1.11.0.min.js"></script>
<style type="text/css">
span{
color: red;
}
</style>
<script>
var flagzhanghao = false;
var flagmima = false;
var flagchongfumima = false;
var flagnicheng = false;
var flagchushengriqi = false;
var flagshengfenzheng = false;
var flagshoujihao = false;
var flagqq = false;
var flagyouxiang = false;
$(function() {
var zzhanghao = /^[a-zA-Z0-9_]{3,16}$/;
$("#zhanghao").blur(function() {
if($(this).val() == "") {
$("#zhanghaoSpan").html("不能为空");
flagzhanghao = false;
} else {
$("#zhanghaoSpan").html("√");
flagzhanghao = true;
}
$(this).val();
if(!zshenfen.test($(this).val())) {
$("#zhanghaoSpan").html("账号格式不正确");
flagzhanghao = false;
} else {
$("#zhanghaoSpan").html("√");
flagzhanghao = true;
}
});
//密码
$("#mima").blur(function() {
if($(this).val() == "") {
$("#mimaSpan").html("不能为空");
flagmima = false;
} else {
if($(this).val().length < 3) {
$("#mimaSpan").html("密码不能小于3");
flagmima = false;
} else {
$("#mimaSpan").html("√");
flagmima = true;
}
}
});
//重复密码
$("#chongfumima").blur(function() {
if($(this).val() == "") {
$("#chongfumimaSpan").html("不能为空");
flagchongfumima = false;
} else if($(this).val() != $("#mima").val()) {
$("#chongfumimaSpan").html("两次密码输入的不一样");
} else {
if($(this).val().length < 3) {
$("#chongfumimaSpan").html("不能小于3");
flagchongfumima = false;
} else {
$("#chongfumimaSpan").html("√");
flagchongfumima = true;
}
}
});
//昵称
$("#nicheng").blur(function() {
if($(this).val() == "") {
$("#nichengSpan").html("不能为空");
flagnicheng = false;
} else if($(this).val() == "我是昵称1" || $(this).val() == "我是昵称2") {
$("#nichengSpan").html("重复");
} else {
if($(this).val().length < 3) {
$("#nichengSpan").html("昵称不能小于3");
flagnicheng = false;
} else {
$("#nichengSpan").html("√");
flagnicheng = true;
}
}
});
// //出生日期 /^((19\d{2})|(200[0-8]))-[1-12]-[1-31]$/
// var zzchusheng= /^((19\d{2})|(201[0-8]))-[1-12]-[1-31]$/;
$("#chusheng").blur(function() {
if($(this).val() == "") {
$("#chushengSpan").html("不能为空");
flagchushengriqi = false;
} else {
$("#chushengSpan").html("√");
flagchushengriqi = true;
}
});
//身份证号码
var zshenfen = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
$("#shenfenzheng").blur(function() {
if($(this).val() == "") {
$("#shenfenzhengSpan").html("不能为空");
flagshengfenzheng = false;
} else {
$(this).val();
if(!zshenfen.test($(this).val())) {
$("#shenfenzhengSpan").html("身份证格式不正确");
flagshengfenzheng = false;
} else {
$("#shenfenzhengSpan").html("√");
flagshengfenzheng = true;
}
}
});
//手机号
var sj = /13[123569]{1}\d{8}|15[1235689]\d{8}|188\d{8}/;
$("#shoujihao").blur(function() {
if($(this).val() == "") {
$("#shoujihaoSpan").html("不能为空");
flagshoujihao = false;
} else {
$(this).val();
if(!sj.test($(this).val())) {
$("#shoujihaoSpan").html("手机格式不正确");
flagshoujihao = false;
} else {
$("#shoujihaoSpan").html("√");
flagshoujihao = true;
}
}
});
// QQ
var zqq = /^\d{5,10}$/;
$("#qq").blur(function() {
if($(this).val() == "") {
$("#qqSpan").html("不能为空");
flagqq = false;
} else {
$(this).val();
if(!zqq.test($(this).val())) {
$("#qqSpan").html("QQ格式不正确");
flagqq = false;
} else {
$("#qqSpan").html("√");
flagqq = true;
}
}
});
//邮箱
//正则表达式 /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
var youxiang = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
$("#youxiang").blur(function() {
if($(this).val() == "") {
$("#youxiangSpan").html("不能为空");
flagyouxiang = false;
} else {
$(this).val();
if(!youxiang.test($(this).val())) {
$("#youxiangSpan").html("邮箱格式不正确");
flagyouxiang = false;
} else {
$("#youxiangSpan").html("√");
flagyouxiang = true;
}
}
});
//点击确认按钮进行跳转
$("#sub").click(function() {
if(flagzhanghao && flagmima && flagchongfumima && flagnicheng && flagchushengriqi && flagshengfenzheng && flagshoujihao && flagqq && flagyouxiang) {
window.location = "https://www.baidu.com/";
} else {
alert("请正确填写！")
}
})
});
</script>
</head>
<body>
<table width="360px" cellspacing="0" cellpadding="1">
<tr>
<td width="131">账号：</td>
<td width="334">
<input type="text" id="zhanghao" />
<span id="zhanghaoSpan"></span>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" id="mima" />
<span id="mimaSpan"></span>
</td>
</tr>
<tr>
<td>重复密码：</td>
<td>
<input type="password" id="chongfumima" />
<span id="chongfumimaSpan"></span>
</td>
</tr>
<tr>
<td>昵称：</td>
<td>
<input type="text" id="nicheng" />
<span id="nichengSpan"></span>
</td>
</tr>
<tr>
<td>出生日期：</td>
<td>
<!--<input type="text" id="chusheng" />-->
<input type="date" id="chusheng" />
<span id="chushengSpan"></span>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked="checked" />女
<input type="radio" name="sex" />男
</td>
</tr>
<tr>
<td>身份证号：</td>
<td>
<input type="text" id="shenfenzheng" />
<span id="shenfenzhengSpan"></span>
</td>
</tr>
<tr>
<td>手机号：</td>
<td>
<input type="text" id="shoujihao" />
<span id="shoujihaoSpan"></span>
</td>
</tr>
<tr>
<td>QQ ：</td>
<td>
<input type="text" id="qq" />
<span id="qqSpan"></span>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="text" id="youxiang" />
<span id="youxiangSpan"></span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="sub">提交</button>
<input type="reset" value="清空" />
</td>
</tr>
</table>
</body>
</html>
jquery表单验证
猜你喜欢
转载自blog.csdn.net/qq_40857831/article/details/78986629
今日推荐
周排行