简单的js表单验证框架

1. /**
2. * 通常在我们的HTML页面表单中有大量的数据验证工作，
3. * 免不了要写很多验证表单的js代码，这是一项非常繁琐
4. * 枯燥的工作。很多程序员也会经常遗漏这项工作。当然
5. * 一些JavaEE框架中有一些比较好的验证框架提供给我们
6. * 使用，但是也是需要很多繁琐的配置，页面查看起来也
7. * 不是很方便。一般程序员使用的也不多。所以写了这一
8. * 段JavaScript代码提供给大家使用。算是一个简单的
9. * JavaScript验证框架吧。使用起来很简单，配合下面几
10. * 种标签使用，能实现大多数表单验证。
11. * 1.验证输入框类，包括，text,textarea,password,hidden等
12. * <textValidate
13. *      field="username" //对应待验证的输入框name属性
14. *      lableText="用户名" //验证未通过时提示名称
15. *      altText="用户名必须是数字，字母，下划线，长度在5-10之间"
16. *      //验证未通过时的提示文字，可不设置，不设置该属性时使用lableText属性提示
17. *      isValidate="false" //是否验证
18. *      min="5" //最小长度
19. *      max="10" //最大长度
20. *      dataType="account"> //数据类型，可选值：string(字符串),
21. *          int(整数),email,account(只能是数字，字母，下划线),
22. *          phone(国内电话号码),postcode(国内邮政编码),code(国内身份证号码),
23. *          ip(电脑IP地址),正则表达式字符串
24. * 2.验证单选和复选框是否必选，包括，radio,checkbox等
25. * <radioValidate
26. *      field="sex"
27. *      altText=""
28. *      lableText="性别"
29. *      isValidate="false">
30. * 3.验证下拉框是否必选，包括，select等
31. * <selectValidate
32. *      field="city"
33. *      altText=""
34. *      lableText="所在城市"
35. *      isValidate="true"
36. *      noValue="-1"> //下拉框不选择时的默认值
37. * Author：BluesLee <br>
38. * CreateDate：2009-8-7 <br>
39. * Modifier：BluesLee <br>
40. * ModifyDate：2009-8-10 <br>
41. * Version:1.0<br>
42. * Copyright(c)2009 深蓝工作室<br>
43. * All right reserved.<br>
44. *
45. */
46. /**
47. * 表单数据验证<br>
48. * Author：BluesLee <br>
49. * CreateDate：2009-8-7 <br>
50. * Modifier：BluesLee <br>
51. * ModifyDate：2009-8-10 <br>
52. * Version:1.0<br>
53. *
54. * @param frm,待验证的表单对象
55. * @return 验证通过返回true,验证失败返回false
56. */
57. function validate(frm){
58. var textValidate=frm.getElementsByTagName("textValidate");
59. for(var i=0;i<textValidate.length;i++){
60. var isValidate=textValidate[i].getAttribute("isValidate");
61. if(isValidate=="false") {
62. continue;
63. }
64. var lable=textValidate[i].getAttribute("lableText");
65. var min=textValidate[i].getAttribute("min");
66. var max=textValidate[i].getAttribute("max");
67. var datatype=textValidate[i].getAttribute("dataType");
68. var alt=textValidate[i].getAttribute("altText");
69. var field=document.getElementsByName(textValidate[i].getAttribute("field"))[0];
70. if(min && min.length>0 && field.value.length<min){
71. if(alt && alt.length>0){
72. alert(alt);
73. }else{
74. alert(lable+"不能小于"+min+"位！");
75. }
76. if(field.select)field.select();
77. field.focus();
78. return false;
79. }
80. if(max && max.length>0 && field.value.replace(/[^x00-xff]/g,"aa").length>max){
81. if(alt && alt.length>0){
82. alert(alt);
83. }else{
84. alert(lable+"不能大于"+max+"位！");
85. }
86. if(field.select)field.select();
87. field.focus();
88. return false;
89. }
90. if(datatype && datatype.length>0){
91. if(datatype=="int"){
92. if(!/^[0-9]+$/g.test(field.value)){
93. if(field.select)field.select();
94. field.focus();
95. if(alt && alt.length>0){
96. alert(alt);
97. }else{
98. alert(lable+"只能输入整数！");
99. }
100. return false;
101. }
102. }else if(datatype=="email"){
103. if(!/^([a-zA-Z0-9_/-/./+]+)@((/[[0-9]{1,3}/.[0-9]{1,3}/.[0-9]{1,3}/.)|(([a-zA-Z0-9/-]+/.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(/]?)$/g.test(field.value)){
104. if(field.select)field.select();
105. field.focus();
106. if(alt && alt.length>0){
107. alert(alt);
108. }else{
109. alert("Email格式不正确！");
110. }
111. return false;
112. }
113. }else if(datatype=="account"){
114. if(!/^[a-zA-Z0-9_]+$/g.test(field.value)){
115. if(field.select)field.select();
116. field.focus();
117. if(alt && alt.length>0){
118. alert(alt);
119. }else{
120. alert(lable+"只能是数字，字母和下划线！");
121. }
122. return false;
123. }
124. }else if(datatype=="phone"){
125. if(!/^d{3}-d{8}|d{4}-d{7}$/g.test(field.value)){
126. if(field.select)field.select();
127. field.focus();
128. if(alt && alt.length>0){
129. alert(alt);
130. }else{
131. alert("电话号码格式不正确，正确格式：0511-4405222 或 021-87888822");
132. }
133. return false;
134. }
135. }else if(datatype=="postcode"){
136. if(!/^[1-9]d{5}(?!d)$/g.test(field.value)){
137. if(field.select)field.select();
138. field.focus();
139. if(alt && alt.length>0){
140. alert(alt);
141. }else{
142. alert("邮政编码不正确");
143. }
144. return false;
145. }
146. }else if(datatype=="code"){
147. if(!/^d{15}|d{18}$/g.test(field.value)){
148. if(field.select)field.select();
149. field.focus();
150. if(alt && alt.length>0){
151. alert(alt);
152. }else{
153. alert("身份证号码不正确");
154. }
155. return false;
156. }
157. }else if(datatype=="ip"){
158. if(!/^(((1?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))/.){3}((1?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/g.test(field.value)){
159. if(field.select)field.select();
160. field.focus();
161. if(alt && alt.length>0){
162. alert(alt);
163. }else{
164. alert("IP地址格式不正确");
165. }
166. return false;
167. }
168. }else{
169. if(!new RegExp(datatype,"g").test(field.value)){
170. if(field.select)field.select();
171. field.focus();
172. if(alt && alt.length>0){
173. alert(alt);
174. }else{
175. alert(lable+"输入格式不正确！");
176. }
177. return false;
178. }
179. }
180. }
181. }
182. var radioValidate=frm.getElementsByTagName("radioValidate");
183. for(var i=0;i<radioValidate.length;i++){
184. var isValidate=radioValidate[i].getAttribute("isValidate");
185. if(isValidate=="false") {
186. continue;
187. }
188. var lable=radioValidate[i].getAttribute("lableText");
189. var alt=textValidate[i].getAttribute("altText");
190. var field=document.getElementsByName(radioValidate[i].getAttribute("field"));
191. var flag=true;
192. for(var j=0;j<field.length;j++){
193. if(field[j].checked){
194. flag=false;
195. break;
196. }
197. }
198. if(flag){
199. if(alt && alt.length>0){
200. alert(alt);
201. }else{
202. alert(lable+"为必选项！");
203. }
204. return false;
205. }
206. }
207. var selectValidate=frm.getElementsByTagName("selectValidate");
208. for(var i=0;i<selectValidate.length;i++){
209. var isValidate=selectValidate[i].getAttribute("isValidate");
210. if(isValidate=="false") {
211. continue;
212. }
213. var lable=selectValidate[i].getAttribute("lableText");
214. var alt=textValidate[i].getAttribute("altText");
215. var noValue=selectValidate[i].getAttribute("noValue");
216. var field=document.getElementsByName(selectValidate[i].getAttribute("field"))[0];
217. if(field.value==noValue){
218. if(alt && alt.length>0){
219. alert(alt);
220. }else{
221. alert(lable+"为必选项！");
222. }
223. return false;
224. }
225. }
226. return true;
227. }

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
• <HTML>
• <HEAD>
• <TITLE> New Document </TITLE>
• <META NAME="Generator" CONTENT="EditPlus">
• <META NAME="Author" CONTENT="">
• <META NAME="Keywords" CONTENT="">
• <META NAME="Description" CONTENT="">
• <mce:script language="JavaScript" src="validate.js" mce_src="validate.js"></mce:script>
• </HEAD>
• <BODY>
• <form onsubmit="return validate(this);">
• <textValidate field="username" lableText="用户名" isValidate="false" min="5" max="10" dataType="account">
• 用户名
• <input name="username" type="text"><br>
• <textValidate field="password" lableText="密码" isValidate="false" min="6" dataType="^[a-zA-Z0-9_]+$">
• 密码
• <input name="password" type="password"><br>
• <textValidate field="email" lableText="Email" isValidate="false" dataType="email">
• Email
• <input name="email" type="text"><br>
• <radioValidate field="sex" lableText="性别" isValidate="true">
• 性别
• <input name="sex" type="radio">男
• <input name="sex" type="radio">女<br>
• <radioValidate field="hunyin" lableText="婚姻状况" isValidate="true">
• 婚姻状况
• <input name="hunyin" type="radio">已婚
• <input name="hunyin" type="radio">未婚<br>
• 兴趣爱好
• <radioValidate field="love" lableText="兴趣爱好" isValidate="true">
• <input name="love" type="checkbox">篮球
• <input name="love" type="checkbox">足球<br>
• 所在城市
• <selectValidate field="city" lableText="所在城市" isValidate="true" noValue="-1">
• <select name="city">
• <option value="-1">请选择...</option>
• <option value="上海">上海</option>
• <option value="北京">北京</option>
• <option value="西安">西安</option>
• </select>
• <input type="submit">
• </form>
• </BODY>
• </HTML>