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.<!DOCTYPE html>
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;
  1. disabled:既不可以编辑,也不可以提交

  2. readonly:不可以编辑,但是可以提交

  3. form:获取该表单域所属的表单 uname.form.submit();

  4. 可以通过JS操作Disabled,其中false是取消,true添加

通用方法

<body onload="document.getElementById('uname').focus();">
1.<!DOCTYPE html>
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.<!DOCTYPE html>
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>
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值