JavaScript详解（10.表单操作及验证）
文章目录
- 一，表单信息详解
- 二，表单域通用属性和个别操作
- 三，文本类型验证
一，表单信息详解
1，根据ID得到Form
var frm1 = document.getElementById(“userFrm”);
2，根据名字得到Form
var frm2 = document.testFrm;
3，操作Form的属性
frm1.action + “–” + frm1.method
4，操作Form的方法
frm1.reset();
frm1.submit();
1.
2.<html>
3.
4. <head>
5. <meta charset="utf-8">
6. <title>title>
7. <script type="text/javascript">
8. function testFrom() {
9. //通过ID获取FRM
10. var frm1 = document.getElementById("userFrm");
11. //通过名字获取FRM
12. var frm2 = document.testFrm;
13. //alert(frm1 === frm2);
14. //操作FRM的属性
15. //alert(frm1.action + "--" + frm1.method)
16. //alert(frm1.elements.length + "--" + frm1.length); //获取from中所有表单域的数量
17. //操作FRM的方法
18. //frm1.reset();
19. //frm1.submit();
20. script>
21. head>
22.
23. <body>
24. <h1>操作FORM表单h1>
25. <input type="button" value="测试表单信息" onclick="testFrom();" />
26. <hr />
27. <form action="#" method="get" id="userFrm" name="testFrm">
28. <input type="text" name="uname" value="123456789" />
29. <input type="submit" value="提交表单" />
30. form>
31. body>
32.
33.html>
二，表单域通用属性和个别操作
1.//获取表单域
2.var uname = document.getElementById("uname");
3.var pwd = document.frm.pwd;
-
disabled：既不可以编辑，也不可以提交
-
readonly:不可以编辑，但是可以提交
-
form:获取该表单域所属的表单 uname.form.submit();
-
可以通过JS操作Disabled,其中false是取消，true添加
通用方法
<body onload="document.getElementById('uname').focus();">
1.
2.<html>
3.
4. <head>
5. <meta charset="utf-8">
6. <title>title>
7. <script type="text/javascript">
8. function testField() {
9. //获取表单域
10. var uname = document.getElementById("uname");
11. var pwd = document.frm.pwd;
12. //通用属性
13. uname.form.submit();
14. //通用方法
15. var sub = document.getElementById("sub");
16. sub.disabled = false;
17. }
18. script>
19. head>
20.
21. <body onload="document.getElementById('uname').focus();">
22. <h1>表单域的通用属性h1>
23. <input type="button" value="测试表单域通用属性" onclick="testField();" />
24. <hr />
25. <form action="#" method="get" name="frm">
26. <input type="text" id="uname" value="" />
27. <input type="text" name="realname" value="胡汉三" readonly />
28. <input type="password" name="pwd" value="" disabled />
29. <input type="radio" id="gender" value="1" />
30. <input type="checkbox" id="fav" value="1" />
31. <input type="submit" id="sub" disabled value="提交表单" />
32. form>
33. body>
34.
35.html>
三，文本类型验证
1.
2.<html>
3. <head>
4. <meta charset="utf-8">
5. <title>title>
6. <style type="text/css">
7. table {
8. width: 80%;
9. }
10. th {
11. width: 150px;
12. }
13. .spanred {
14. color: red;
15. }
16. .spangreen {
17. color: green;
18. }
19. style>
20. <script type="text/javascript">
21. var globalCode = "";
22.
23. function generateCode() {
24. //随机生成1000到9999的验证码
25. globalCode = parseInt(Math.random() * 9000 + 1000);
26. //将验证码显示到span
27. document.getElementById("randomCode").innerHTML = globalCode;
28. }
29.
30. function checkUname() {
31. //定义正则表达式对象
32. var reg = /^\w{4,12}$/ig;
33. return checkField("uname", reg);
34. }
35.
36. function checkPwd() {
37. //定义正则表达式对象
38. var reg = /^\w{4,12}$/ig;
39. return checkField("pwd", reg) && checkPwd2();
40. }
41.
42. function checkPwd2() {
43. var pwd = document.getElementById("pwd");
44. var pwd2 = document.getElementById("pwd2");
45. var span = document.getElementById("pwd2Span");
46. if (pwd2.value.length == 0) {
47. span.className = "spanred";
48. span.innerHTML = "数据项[确认密码]不能为空";
49. return false;
50. } else if (pwd.value == pwd2.value) {
51. span.className = "spangreen";
52. span.innerHTML = "数据项[确认密码]ok";
53. return true;
54. } else {
55. span.className = "spanred";
56. span.innerHTML = "数据项[密码]和[确认密码]不一致";
57. return false;
58. }
59. }
60.
61. function checkRealname() {
62. //定义正则表达式对象
63. var reg = /^[\u4e00-\u9fa5]{2,6}$/ig;
64. return checkField("realname", reg);
65. }
66.
67. function checkEmail() {
68. //定义正则表达式对象
69. var reg = /^\w{5,12}@\w{2,10}(\.[a-z]{2,3}){1,2}$/ig;
70. return checkField("email", reg);
71. }
72.
73. function checkPhone() {
74. //定义正则表达式对象
75. var reg = /^1[3458]\d{9}$/ig;
76. return checkField("phone", reg);
77. }
78.
79. function checkIntro() {
80. //定义正则表达式对象
81. var reg = /^.{0,500}$/ig;
82. //获取表单域的
83. var obj = document.getElementById("intro");
84. //获取表单域的值
85. var val = obj.value;
86. //获取表单域的文本描述
87. var alt = obj.alt;
88. //获取span
89. var span = document.getElementById("introSpan");
90. //对表单域的值进行验证
91. if (reg.test(val)) {
92. span.className = "spangreen";
93. span.innerHTML = "数据项[个人介绍]ok";
94. return true;
95. } else {
96. span.className = "spanred";
97. span.innerHTML = "数据项[个人介绍]不符合规则";
98. return false;
99. }
100. }
101.
102. function checkField(objId, reg) {
103. //获取表单域的
104. var obj = document.getElementById(objId);
105. //获取表单域的值
106. var val = obj.value;
107. //获取表单域的文本描述
108. var alt = obj.alt;
109. //获取span
110. var span = document.getElementById(objId + "Span");
111. //对表单域的值进行验证
112. if (val == null || val.length == 0) {
113. span.className = "spanred";
114. span.innerHTML = "数据项[" + alt + "]不能为空";
115. return false;
116. } else if (reg.test(val)) {
117. span.className = "spangreen";
118. span.innerHTML = "数据项[" + alt + "]ok";
119. return true;
120. } else {
121. span.className = "spanred";
122. span.innerHTML = "数据项[" + alt + "]不符合规则";
123. return false;
124. }
125. }
126.
127. function checkFav() {
128. //获取对象
129. var fav = document.getElementsByName("fav");
130. var span = document.getElementById("favSpan");
131. //遍历并判断
132. for (var i = 0; i < fav.length; i++) {
133. if (fav[i].checked) {
134. span.className = "spangreen";
135. span.innerHTML = "数据项[爱好]ok";
136. return true;
137. }
138. }
139. span.className = "spanred";
140. span.innerHTML = "数据项[爱好]至少选择一项";
141. return false;
142. }
143.
144. function checkAddress() {
145. //获取对象
146. var address = document.getElementById("address");
147. var span = document.getElementById("addressSpan");
148. //判断是否为正确选项
149. if (address.value == "") {
150. span.className = "spanred";
151. span.innerHTML = "数据项[户籍地址]不能为请选择";
152. return false;
153. } else {
154. span.className = "spangreen";
155. span.innerHTML = "数据项[户籍地址]ok";
156. return true;
157. }
158. }
159.
160. function checkCode() {
161. //获取CODE
162. var code = document.getElementById("code");
163. var span = document.getElementById("codeSpan");
164. //验证长度
165. if (code.value.length == 4 && code.value == globalCode) {
166. span.className = "spangreen";
167. span.innerHTML = "数据项[验证码]ok";
168. return true;
169. } else {
170. span.className = "spanred";
171. span.innerHTML = "数据项[验证码]输入错误";
172. return false;
173. }
174. }
175.
176. function checkAgree() {
177. //获取是否同意
178. var agree = document.getElementById("agree");
179. //获取提交按钮
180. var sub = document.getElementById("sub");
181. sub.disabled = !agree.checked;
182. }
183.
184. function testReset() {
185. var flag = window.confirm("您确定要重置注册信息吗?");
186. return flag;
187. }
188.
189. function testSubmit() {
190. var unameFlag = checkUname();
191. var pwdFlag = checkPwd();
192. var pwd2Flag = checkPwd2();
193. var emailFlag = checkEmail();
194. var realnameFlag = checkRealname();
195. var phoneFlag = checkPhone();
196. var favFlag = checkFav();
197. var addressFlag = checkAddress();
198. var introFlag = checkIntro();
199. var codeFlag = checkCode();
200. return unameFlag && pwdFlag && pwd2Flag && emailFlag && realnameFlag && phoneFlag && favFlag && addressFlag && introFlag && codeFlag;
201. }
202. script>
203. head>
204.
205. <body onload="generateCode();">
206. <h1>表单数据验证h1>
207. <form action="#" method="get" name='frm' onsubmit="return testSubmit();" onreset="return testReset();">
208. <table border="1">
209. <tr>
210. <th>用户名th>
211. <td>
212. <input type="text" id="uname" alt="用户名" name="uname" value="" onblur="checkUname();" />
213. <span id="unameSpan">span>
214. td>
215. tr>
216. <tr>
217. <th>密码th>
218. <td>
219. <input type="password" id="pwd" alt="密码" name="pwd" value="" onblur="checkPwd();" />
220. <span id="pwdSpan">span>
221. td>
222. tr>
223. <tr>
224. <th>确认密码th>
225. <td>
226. <input type="password" id="pwd2" value="" onblur="checkPwd2();" />
227. <span id="pwd2Span">span>
228. td>
229. tr>
230. <tr>
231. <th>真实姓名th>
232. <td>
233. <input type="text" id="realname" name="realname" alt="真实姓名" value="" onblur="checkRealname();" />
234. <span id="realnameSpan">span>
235. td>
236. tr>
237. <tr>
238. <th>电子邮箱th>
239. <td>
240. <input type="text" id="email" name="email" alt="电子邮箱" value="" onblur="checkEmail();" />
241. <span id="emailSpan">span>
242. td>
243. tr>
244. <tr>
245. <th>手机号码th>
246. <td>
247. <input type="text" id="phone" name="phone" alt="手机号码" value="" onblur="checkPhone();" />
248. <span id="phoneSpan">span>
249. td>
250. tr>
251. <tr>
252. <th>性别th>
253. <td>
254. <input type="radio" name="gender" value="1" checked />男
255. <input type="radio" name="gender" value="2" />女
256.
257. td>
258. tr>
259. <tr>
260. <th>爱好th>
261. <td>
262. <input type="checkbox" name="fav" value="1" onclick="checkFav();" />足球
263. <input type="checkbox" name="fav" value="2" onclick="checkFav();" />篮球
264. <input type="checkbox" name="fav" value="3" onclick="checkFav();" />乒乓球
265. <input type="checkbox" name="fav" value="4" onclick="checkFav();" />羽毛球
266. <span id="favSpan">span>
267. td>
268. tr>
269. <tr>
270. <th>户籍地址th>
271. <td>
272. <select name="address" id="address" onchange="checkAddress();">
273. <option value="">--请选择--option>
274. <option value="1">河南option>
275. <option value="2">河北option>
276. <option value="3">湖南option>
277. <option value="4">湖北option>
278. select>
279. <span id="addressSpan">span>
280. td>
281. tr>
282. <tr>
283. <th>个人介绍th>
284. <td>
285. <textarea id="intro" name="intro" rows="5" cols="80" alt="个人介绍" onblur="checkIntro();">textarea>
286. <span id="introSpan">span>
287. td>
288. tr>
289. <tr>
290. <th>验证码th>
291. <td>
292. <input type="text" id="code" size="4" maxlength="4" value="" onblur="checkCode();" />
293. <span id="randomCode" onclick="generateCode();">span>
294. <span id="codeSpan">span>
295. td>
296. tr>
297. <tr>
298. <th colspan="2">
299. <input type="checkbox" id="agree" checked="checked" onclick="checkAgree();" /> 是否阅读并同意协议
300. th>
301. tr>
302. <tr>
303. <th colspan="2">
304. <input type="submit" id="sub" value="提交" />
305. <input type="reset" value="重置" />
306. th>
307. tr>
308. table>
309. form>
310. body>
311.
312.html>