<head>
<title>表单验证</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link type="text/css" rel="stylesheet " href="css/form.css">
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script>
$().ready(function(){
//如果必填则添加*标志
$("form :input.required").each(function(){
var required=$("<strong class='high'>*</strong>");
$(this).parent().append(required);
});
//文本框失去焦点后
var bol=false;//临时保存用户名是否存在的变量
$("form :input").blur(function(){
var tmppwd;//临时保存密码
var $parent=$(this).parent(); //匹配input的父元素
$parent.find(".formtips").remove();
if($(this).is("#username")){
if(this.value==""){
var msg="用户名不能为空";
//alert(msg);
$parent.append("<div class='formtips onError'>"+msg+"</div>");
}else if(this.value.length<5){
var msg="用户名长度为5-20个字符";
$parent.append("<div class='formtips onError'>"+msg+"</div>");
}else if(checkname(this.value)){
bol=false;//将变量值还原为false
var msg="用户存在";
$parent.append("<div class='formtips onError'>"+msg+"</div>");
}else{
$parent.append("<div class='formtips onSuccess'>Success!</div>");
}
}
if($(this).is("#password")){
pwd=this.value;
if(this.value==""){
var msg="密码不能为空";
$parent.append("<div class='formtips onError'>"+msg+"</div>");
}else if(this.value.length<6){
var msg="密码长度为6-20个字符";
$parent.append("<div class='formtips onError'>"+msg+"</div>");
}else{
$parent.append("<div class='formtips onSuccess'>Success!</div>");
}
}
if($(this).is("#repassword")){
if(this.value==""){
var msg="确认密码不能为空";
$parent.append("<div class='formtips onError'>"+msg+"</div>");
}else if(this.value!=pwd){
var msg="密码不一致";
$parent.append("<div class='formtips onError'>"+msg+"</div>");
}else{
$parent.append("<div class='formtips onSuccess'>Success!</div>");
}
}
if($(this).is("#email")){
if(this.value==""){
var msg="邮箱不能为空";
$parent.append("<div class='formtips onError'>"+msg+"</div>");
}else if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(this.value)){
var msg="邮箱格式错误";
$parent.append("<div class='formtips onError'>"+msg+"</div>");
}else{
$parent.append("<div class='formtips onSuccess'>Success!</div>");
}
}
if($(this).is("#mobile")){
if(this.value!=""){
if(!/^1[3|4|5|8][0-9]\d{8}$/.test(this.value)){
var msg="手机格式错误";
$parent.append("<div class='formtips onError'>"+msg+"</div>");
}else{
$parent.append("<div class='formtips onSuccess'>Success!</div>");
}
}
}
})
//为键盘按下及获得焦点事件绑定"blur"
// .keyup(function(){
// $(this).triggerHandler("blur");
// })
// .focus(function(){
// $(this).triggerHandler("blur");
// });
//ajax传递数据
function checkname(name){
$.ajax({
type:"post",
url:"checkname",
async:false,
data:"username="+name,
success:function(data){
if(data=="true"){
bol=true;
}
}
});
return bol;
};
//提交最终验证
$("#send").click(function(){
$("form :input.required").trigger("blur");
var errornum=$("form .onError").length;
if(errornum){
return false;
}
alert("注册成功");
});
$("#clear").click(function(){
$(".formtips").remove();
});
})
</script>
</head>
<body>
<form action="regeist" method="post">
<div class="int">
<label for="username"> 用 户 名:</label>
<input type="text" id="username" class="required"/>
</div>
<div class="int">
<label for="password"> 密 码:</label>
<input type="password" id="password" class="required"/>
</div>
<div class="int">
<label for="repassword"> 确认密码:</label>
<input type="password" id="repassword" class="required"/>
</div>
<div class="int">
<label for="email"> 邮 箱:</label>
<input type="text" id="email" class="required"/>
</div>
<div class="int">
<label for="mobile">手机号码:</label>
<input type="text" id="mobile" >
</div>
<div class="int">
<label for="birthday">出生日期:</label>
<input type="text" id="birthday" >
</div>
<div class="btn">
<input type="submit" id="send" value="提交"/>
<input type="reset" id="clear" value="重置"/>
</div>
</form>
</body>
这个明显还是不错，一般自己都用这个，，我觉的还可以~
body{
padding: 10px;
}
.onError,.high{
color:red;
}
.onSuccess{
color:green;
}
.int{
margin-bottom: 20px;
}
#send,#clear{
width:80px;
height:40px;
border: 0;
background-color: #008000;
color:#ffffff;
border-radius: 8px;
}
#send{
margin-right: 30px;
}
#clear{
margin-left: 30px;
}
#birthday,#email,#mobile,#password,#repassword,#username{
width: 150px;
height:30px;
}
