JQuery学习笔记16——表单验证
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>表单验证</title>
6<link href="css/style.css" rel="stylesheet" type="text/css" />
7<script type="text/javascript" src="jquery-1.3.1.js"></script>
8<script type="text/javascript">
9
$(function(){
10
$("form :input.required").each(function(){
11
var $required = $("<strong class='high'>*</strong>");//创建元素
12 $(this).parent().append($required);//将它追加到文档中
13
});
14 $("form :input").blur(function(){//为表单元素添加失去焦点事件
15 var $parent = $(this).parent();
16 $parent.find(".formtips").remove();//删除以前的提醒元素
17 //验证用户名
18 if($(this).is("#username")){
19 if(this.value == ""|| this.value.length < 6){
20 var errorMsg = "请输入至少6位的用户名。";
21 $parent.append("<span class='formtips onError'>"+ errorMsg +"</span>");
22 }else{
23 var okMsg = "输入正确";
24 $parent.append("<span class='formtips onSuccess'>"+ okMsg +"</span>");
25 }
26 }
27 //验证邮箱
28 if($(this).is("#email")){
29 if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
30 var errorMsg = "请输入正确E-Mail地址。";
31 $parent.append("<span class='formtips onError'>"+ errorMsg + "</span>");
32 }else{
33 var okMsg = "输入正确";
34 $parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>");
35 }
36 }
37
38 }).keyup(function(){
39 $(this).triggerHandler("blur");//keyup事件能在用户每次松开按键时触发
40 }).focus(function(){
41 $(this).triggerHandler("blur");//focus事件能在元素得到焦点时触发
42 });
43 //提交按钮事件
44 $("#send").click(function(){
45 $("form :input.required").trigger("blur");
46 var numError = $("form .onError").length;
47 if(numError){
48 return false;
49 }
50 alert("注册成功，密码已发到你的邮箱，请查收。");
51 });
52
})
53</script>
54</head>
55<body>
56<form method="post" action="">
57 <div class="int">
58 <label for="username">用户名：</label>
59 <input type="text" id="username" class="required" />
60 </div>
61 <div class="int">
62 <label for="email">邮箱：</label>
63 <input type="text" id="email" class="required" />
64 </div>
65 <div class="int">
66 <label for="personinfo">个人资料：</label>
67 <input type="text" id="personinfo" />
68 </div>
69 <div class="sub">
70 <input type="submit" id="send" value="提交" />
71 <input type="reset" id="res" value="取消" />
72 </div>
73</form>
74</body>
75</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5
<title>表单验证</title>6
<link href="css/style.css" rel="stylesheet" type="text/css" />7
<script type="text/javascript" src="jquery-1.3.1.js"></script>8
<script type="text/javascript">9
$(function(){
$(function()
10
$("form :input.required").each(function(){
$(11
var $required = $("<strong class='high'>*</strong>");//创建元素12
$(this).parent().append($required);//将它追加到文档中13
});14
$("form :input").blur(function(){//为表单元素添加失去焦点事件15
var $parent = $(this).parent();16
$parent.find(".formtips").remove();//删除以前的提醒元素17
//验证用户名18
if($(this).is("#username")){19
if(this.value == ""|| this.value.length < 6){20
var errorMsg = "请输入至少6位的用户名。";21
$parent.append("<span class='formtips onError'>"+ errorMsg +"</span>");22
}else{23
var okMsg = "输入正确";24
$parent.append("<span class='formtips onSuccess'>"+ okMsg +"</span>");25
}26
}27
//验证邮箱28
if($(this).is("#email")){29
if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){30
var errorMsg = "请输入正确E-Mail地址。";31
$parent.append("<span class='formtips onError'>"+ errorMsg + "</span>");32
}else{33
var okMsg = "输入正确";34
$parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>"); 35
}36
}37
38
}).keyup(function(){39
$(this).triggerHandler("blur");//keyup事件能在用户每次松开按键时触发40
}).focus(function(){41
$(this).triggerHandler("blur");//focus事件能在元素得到焦点时触发42
});43
//提交按钮事件44
$("#send").click(function(){45
$("form :input.required").trigger("blur");46
var numError = $("form .onError").length;47
if(numError){48
return false;49
}50
alert("注册成功，密码已发到你的邮箱，请查收。"); 51
});52
})53
</script>54
</head>55
<body>56
<form method="post" action="">57
<div class="int">58
<label for="username">用户名：</label>59
<input type="text" id="username" class="required" />60
</div>61
<div class="int">62
<label for="email">邮箱：</label>63
<input type="text" id="email" class="required" />64
</div>65
<div class="int">66
<label for="personinfo">个人资料：</label>67
<input type="text" id="personinfo" />68
</div>69
<div class="sub">70
<input type="submit" id="send" value="提交" />71
<input type="reset" id="res" value="取消" />72
</div>73
</form>74
</body>75
</html>注：
trigger("blur")不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。
而triggerHandler("blur")只会触发为元素绑定的blur事件，而不触发浏览器默认的blur事件。
