<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery表单验证</title>
<!--百度在线压缩地址-->
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<!--创建表单验证步骤 :-->
<!--
1:先给表单元素设置blur(获取焦点事件)判断各个输入框内的值是否匹配
2:当表单提交时可以触发所有表单的blur(获取焦点事件)
3:把所有的表单元素进行综合判断看是否有问题
-->
<!--样式-->
<style>
span{
color:red;
font-size: 14px;
display: none;
}
.wrap{
width:100%;
height:100%;
}
#divid{
width:310px;
height: 400px;
padding-top:100px;
margin:0 auto;
}
</style>
</head>
<body>
<!--在method上,get值是显示表单内容,post值是不显示表单内容-->
<div class="wrap">
<div id="divid">
<form action="reg.php" method="get">
<p>用户名:</p>
<p>
<input type="text" name="username" class="auth">
<span class="error">用户名至少6位!</span>
</p>
<p>密码:</p>
<p>
<input type="password" name="password" class="auth">
<span class="error">密码至少8位!</span>
</p>
<p>确认密码:</p>
<p>
<input type="password" name="repassword" class="auth">
<span class="error">两次密码必须一致!</span>
</p>
<p>邮箱:</p>
<p>
<input type="text" name="email" class="auth">
<span class="error">邮箱格式不正确!</span>
</p>
<p>手机号码:</p>
<p>
<!--注意手机号码位数要限制在11位-->
<input type="text" name="phone" class="auth" maxlength="11">
<span class="error">手机号码不正确!</span>
</p>
<p><input type="submit" value="提交" ></p>
</form>
</div>
</div>
<script>
//匹配用户名:
$("input[name=username]").blur(
function(){
//获取输入内容的长度 this表示获取元素的DOM写法
var val= this.value;
//再判断这个内容的长度是否小于限定范围
if(val.length<2){
//给Jquery对象加一个属性,不影响元素本身,用于判断是否都已经输入正确
$(this).data({"s":0});
//如果小于,则将这个对象($(this)表示获取元素的Jquery写法)的下一个紧跟元素调用show()方法显示出来
$(this).next().show();
}else{
//给元素用Jquery加一个属性,不影响标签本身
$(this).data({"s": 1});
//如果条件不满足,则调用方法还是将下一个元素调用hide()方法隐藏
$(this).next().hide();
}
}
);
//匹配密码:
$("input[name=password]").blur(
function(){
var val= this.value;
if(val.length<8){
$(this).data({"s":0});
$(this).next().show();
}else{
$(this).data({"s":1});
$(this).next().hide();
}
}
);
//匹配二次密码:
$("input[name=repassword]").blur(
function(){
//获取第一次输入密码
var oneVal = $("input[name=password]").val();
//获取第二次输入的密码
var thisVal= this.value;
//判断输入框是否为空
if(thisVal.length == 0){
$(this).data({"s":0});
$(this).next().html("确认密码不能为空").show();
//判断输入的内容是否和第一次密码一致
} else if(oneVal != thisVal){
$(this).data({"s":0});
$(this).next().html("两次密码必须一致").show();
}else{
$(this).data({"s":1});
$(this).next().hide();
}
}
);
//匹配邮箱:
$("input[name=email]").blur(
function(){
var val= this.value;
if(!val.match(/^\w+@\w+\.+\w+$/i)){
$(this).data({"s":0});
$(this).next().show();
}else{
$(this).data({"s":1});
$(this).next().hide();
}
}
);
//匹配手机:
$("input[name=phone]").blur(
function(){
var val= this.value;
if(!val.match(/^1[3|4|5|7| 8]+\d{9}/)){
$(this).data({"s":0});
$(this).next().show();
}else{
$(this).data({"s":1});
$(this).next().hide();
}
}
);
//提交表单前综合验证
$("form").submit(function(){
//提交表单按钮每点击一次就获取所有的class类名为auth的输入框的焦点进行判断
$(".auth").blur();
//定义一个计数器,计算表单输入框的填写正确数量
tot = 0;
//对输入框进行遍历
$(".auth").each(
//然后把所有的计数器取出,再赋值给计数器
function(){
tot += $(this).data("s");
}
);
//判断输入框匹配数量是否正确
if(tot!=5){
//如果不正确就返回false阻止表单提交
return false;
}
alert("表单提交成功!");
});
</script>
</body>
</html>