2.8

HTML5+JavaScript 前端交互验证的两种方式
JSON的全称是”JavaScript Object Notation”，意思是JavaScript对象表示法，它是一种基于文本，独立于语言的轻量级数据交换格式。

第一种：
用户体验可能不是太好，但是对用户的警示作用很明显（界面弹窗警告）
表单 onsubmit函数
JavaScript

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3
4
5
6
7
8
9
42
43
44
45

46
47
134
135

48

49
50
51
54
57
58
59
60
61
64
67
68
69
70
73
76
77
78
79
82
85
86
87
88
91
94
95
96
97
100
103
104
105
106
109
113
114
115
116
119
122
123
124
125
130
131

52 毕业大学 53	55 56
62 用户名 63	65 66
71 密码 72	74 75
80 确认密码 81	83 84
89 Email 90	92 93
98 姓名 99	101 102
107 性别 108	110 男 111 女 112
117 出生日期 118	120 121
126 127 128 129

132

133

136
137

第二种

用户体验好，每一个框的外面用文字提示用户

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3
4
5
6
7
8
22
23
24
25 <table border="1px" align="center" width="1300px" cellpadding="0px"
26 cellspacing="0px">
27
28
29 <form action="#" method="get" name="regForm"
30 onsubmit="return checkForm()">
31 <table border="1px" width="450px" height="400px" align="center"
32 cellpadding="0px" cellspacing="0px" bgcolor="white">
33
34 用户名
35 <input type="text" name="user" size="34px" id="user"
36 onfocus="showTips('user','用户名必填！')"
37 onblur="check('user','用户名不能为空！')" />
38
39
40
41
42 密码
43 <input type="password" name="password" size="34px"
44 id="password" onfocus="showTips('password','密码必填')"
45 onblur="check('password','密码不能为空!')" />
46
47
48
49
50
51 确认密码
52 <input type="password" name="repassword" size="34px"
53 id="repassword">
54
55
56
57 Email
58
59
60
61
62
63 姓名
64 <input type="text" name="username" size="34px"
65 id="username">
66
67
68
69 性别
70 男 <input
71 type="radio" name="sex" value="女" />女
72
73
74
75 出生日期
76 <input type="text" name="birthday" size="34px"
77 id="birthday">
78
79
80 喜欢的游戏
81 <input type="text" name="game" list="data" id="game"
82 onfocus="showTips('game','该输入栏必填')"
83 onblur="check('game','请填写该输入栏！')" />
84
85
86
93
94
95
96
97
98

99
100
101
102
103
104
105
106
107
108
109