JavaScript详解（10.表单操作及验证）

亦凉 2023-07-01 08:50 32阅读 0赞

### 文章目录 ###

*  一，表单信息详解
 *  二，表单域通用属性和个别操作
 *  三，文本类型验证

# 一，表单信息详解 #

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添加

通用方法

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>

# 三，文本类型验证 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70]

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200120164049782.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70