<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>.html</title>
<style>
*{margin:0;padding:0;}
#reg{30%;margin:20px auto;}
#reg h1{text-align: center;}
#reg p{margin-top:20px;padding-left:10px;}
#reg span{display:inline-block;80px;height:25px;text-align:right;}
#btn{display: block;70px;margin:0 auto;background: #f60;color:#fff;}
#reg .err{display:none;color:red;padding-left:28px;}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
var form=$("#my_form");
$("input").change(function(){ //当input的值改变的时候，.err就隐藏
$(".err").hide();
});
function isEmpty(val){//判断一个值是否为空
if($.trim(val)) //去掉前后空格后，如果为真（有东西就为真）
return true; // 为真就执行这句，为假就不执行这句，但是会接着执行下一句
return false; //
}
function isChecked(ele){ //专门检查checkbox是否被选中
if(ele.attr("checked")) //如果这个checkbox有checked属性，返回真，否则返回假
return true;
return false;
}
//判断用户名
$("#username").blur(function(){
var val=$(this).val();
var reg_user=/^[a-zA-Z0-9]+$/;
if(val.length<4||val.length>32){ //(长度4——32)
$(".err1").html("用户名长度需在4到32位之间").show();
}
else if(!reg_user.test(val)){ //判断用户名格式
$(".err1").html("用户名只接受字母和数字").show();
}
else{//当判断了长度和格式都没有问题，那么可以发送一个请求
$.ajax({ //这里模拟ajax请求
type:"post",
url:"user/username-exists",
data:{username:val},
}).then(function(data){
if(paeseInt(data)==1){//根据服务器返回情况进行处理
$(".err1").html("用户名已存在").show();
}
});
}
});
//判断邮箱
$("#email").blur(function(){
var val=$(this).val();
var reg_emial=/^(w-*.*)+@(w-?)+(.w{2,})+$/;
if(!$.trim(val)){//$.trim()去掉前后空格后还是空的话
$(".err2").html("邮箱不能为空").show();
}
else if(!reg_emial.test(val)){
$(".err2").html("邮箱格式不正确").show();
}
});
//判断密码
$("#password").blur(function(){
var val=$(this).val();
if(!isEmpty(val)){
$(".err3").html("密码不可为空").show();
}
else if(val.length<6||val.length>8){
$(".err3").html("密码长度需为6到8位之间").show();
}
});
//确认密码
$("#password1").blur(function(){
var val=$(this).val();
if(!isEmpty(val)){
$(".err4").html("请重新输入密码").show();
}
else if(val!==$("#password").val()){
$(".err4").html("两次输入不一致").show();
}
});
//同意条款
$("#agree").change(function(){
if(!isChecked($(this))){
$(".err5").html("您还未同意服务条款").show();
}
});
});
</script>
</head>
<body>
<div id="reg" >
<form id="my_form" action="###" methor="post">
<h1>注册</h1>
<p><label for="username"><span>用户名：</span></label>
<input type="text" id="username"></p>
<span class="err err1"></span>
<p><label for="email"><span>邮 箱：</span></label>
<input type="email" id="email"></p>
<span class="err err2"></span>
<p><label for="password"><span>密 码：</span></label>
<input type="password" id="password"></p>
<span class="err err3"></span>
<p><label for="password1"><span>确认密码：</span></label>
<input type="password" id="password1"></p>
<span class="err err4"></span>
<p><input type="checkbox" id="agree">已阅读并同意××条款 <span class="err err5"></span></p>
<p><input type="submit" value="提交" id="btn"></p>
</form>
</div>
</body>
</html>