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>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

注:
trigger("blur")不仅会触发为元素绑定的blur事件,也会触发浏览器默认的blur事件,即不能将光标定位到文本框上。
而triggerHandler("blur")只会触发为元素绑定的blur事件,而不触发浏览器默认的blur事件。