JS 表单

时间:2020-05-16
本文章向大家介绍JS 表单,主要包括JS 表单使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

JS 的表单提交

涉及到的都是前端的知识:HTML、CSS、JavaScript 等

项目需求:

  1. 用户名不能为空;
  2. 用户名必须在6-14位之间;
  3. 用户名只能有数字和字母组成,不能含有其它符号(正则表达式);
  4. 密码和确认密码一致,邮箱地址合法;
  5. 统一失去焦点验证;
  6. 错误提示信息统一在span标签中提示,并且要求字体12号,红色;
  7. 文本框再次获得焦点后,清空错误提示信息,如果文本框中数据不合法要求清空文本框的value;
  8. 最终表单中所有项均合法方可提交

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		<!-- 设置 span 样式 -->
		<style type="text/css">
			span{
				font-size: 12px;
				color: red;
			}
		</style>
			
	</head>
	<body>
		<script type="text/javascript">
		
		   window.onload=function(){
				// 获取用户名 span 对象
				var usernameSpan = document.getElementById("usernameError");
				// 给用户名文本框绑定 blur 事件
				document.getElementById("username").onblur=function(){
					// 获取用户名对象
					var username = document.getElementById("username").value;
					// 去除前后空白
					username = username.trim();
		
					// if(username.length == 0)
					// if(username === "")
					
					if(username){ // 程序到这代表username不是空字符串
						if(username.length >= 6 && username.length <= 14){ // 继续判断长度 6-14 个长度
							// 继续判断用户名是否包含特殊字符
							var regExp = /^[A-Za-z0-9]+$/;
							var flag = regExp.test(username);
							if(flag){ 
								// 用户名最终合法,什么也不做
							}else{
								usernameSpan.innerText = "用户名只能由数字、字母组成,不能含有其他符号!"
							}
						}else{
							usernameSpan.innerText = "用户名长度必须在 6 - 14 之间!"
						}
					}else{
						usernameSpan.innerText = "用户名不能为空!"
					}
				}
				
				// 给用户名文本框绑定 focus 事件
				document.getElementById("username").onfocus = function(){
					
					// 清空非法的username
					if(usernameSpan.innerText != ""){
						document.getElementById("username").value = "";
					}
					// 清空span
					usernameSpan.innerText = "";
				}
				
				// 获取确认密码的 span 标签
				var passwordErrorSpan = document.getElementById("repasswordError")	
				// 获取确认密码框对象
				var queRenMiMa = document.getElementById("repwd");
				// 获取密码框对象
				var miMa = document.getElementById("pwd");
				
				// 确认密码绑定 blur 事件
				queRenMiMa.onblur = function(){
					if(queRenMiMa.value != miMa.value){
						passwordErrorSpan.innerText = "密码不一致,请重新输入!"
					}
				}
				// 确认密码绑定 focus 事件
				document.getElementById("repwd").onfocus = function(){
					// 清空不一致的密码和确认密码
					if(passwordErrorSpan.innerText != ""){
						// 清空 span
						passwordErrorSpan.innerText = "";
						// 清空密码
						miMa.value = "";
						// 清空确认密码
						queRenMiMa.value = "";
					}
				}
				
				/* 检查邮箱是否合法 */
				
				// 获取邮箱文本框对象
				var emailObject = document.getElementById("email");
				// 创建邮箱正则表达式
				var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				// 获取邮箱span对象
				var emailSpan = document.getElementById("emialError");
				// 邮箱文本框绑定 blur 事件
				emailObject.onblur = function(){
					var emailFlag = emailRegExp.test(emailObject.value);
					if(!emailFlag){
						emailSpan.innerText = "邮箱不合法!";
					}
				}
				// 邮箱文本框绑定 focus 事件
				document.getElementById("email").onfocus = function(){
					// 清空不合法的邮箱
					if(emailSpan.innerText != ""){
						// 清空邮箱
						emailObject.value = "";
					}
					// 清空 span
					emailSpan.innerText = "";
					
				}
				
				// 获取表单对象
				var submitBtnElt = document.getElementById("submitButton");
				// 给提交按钮绑定click事件
				submitBtnElt.onclick = function(){
					// 当所有表单项都合法时,提交表单
					/*
						触发所有表单对象的 blur 事件,如果都合法则最终合法
						不需要手动触发事件,让程序(JS代码)触发事件
					*/
					document.getElementById("username").focus();
					document.getElementById("username").blur();
					
					/* document.getElementById("pwd").focus();
					document.getElementById("pwd").blur(); */
					
					document.getElementById("repwd").focus();
					document.getElementById("repwd").blur();
					
					document.getElementById("email").focus();
					document.getElementById("email").blur();
					
					var formElt = document.getElementById("myform");
					// 提交表单方法
					// 也可以在这里设置action属性
					if(usernameSpan.innerText == "" && passwordErrorSpan.innerText == "" 
						&& emailSpan.innerText == ""){
							formElt.submit();
						}
				}
			}
		</script>
		
		<!-- 表单 (提交应该使用 post 方式,而不是 get)-->
		<form action="localhost:8080/oa/save" method="get" id="myform">
			
			<table align="left">
						
				<tr align="center">
					<td>用户名</td>
					<td>
						<input type="text" name="username" id="username" />
						<span id="usernameError"></span>
					</td>
					
				</tr>
				<tr align="center">
					<td>密码</td>
					<td>
						<!-- 这里为了测试写成 text,正常写成 password -->
						<input type="text" name="password" id="pwd" />
						<span id="passwordError"></span>
					</td>
					
				</tr>
				<tr align="center">
					<td>确认密码</td>
					<td>
						<input type="text" id="repwd" />
						<span id="repasswordError"></span>
					</td>
					
				</tr>
				<tr align="center">
					<td>邮箱</td>
					<td>
						<input type="text" name="email" id="email" />
						<span id="emialError"></span>
					</td>
					
				</tr>
			</table>
			
			<br><br><br><br><br><br>
			
			<!-- <input type="submit" value="注册" /> -->
			<input type="button" value="注册" id="submitButton"/>
			<input type="reset" value="重置" />
		</form>
		
	</body>
</html>

结果:
表单项不合法情况示例:

表单项全部合法可提交示例:

原文地址:https://www.cnblogs.com/yerun/p/12902215.html