JavaScript实现表单验证（包含实例）

表单验证意义与场景

降低服务器压力

拦截不合格的数据，避免直接提交到服务器，可以显著降低服务器开销

提升用户体验

早期的互联网，表单项都是非常多的，注册个账号，经常需要填写20+个字段。而其中有一个填写不正
确就要等待几十秒时间。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体
字段。现在虽然无刷新技术早已普及，但是只依赖服务端验证，还是会有几百毫秒的延迟，实际使用会
有一种很难受的粘滞感。

表单验证举例

js脚本定义
定义了判别用户名的方法

<script>
			function validateName(){
				var name = document.getElementById("userName").value;
				var msg=document.getElementById("nameMsg");
				if(name==null && name==""){
					msg.innerHTML="用户名不能为空！！";
					msg.style.color="red";
					return false;
				}else if(name.length<6){
					msg.innerHTML="用户名长度不合法！！";
					msg.style.color="red";
					return false;
				}
				msg.innerHTML="✔";
				msg.style.color="green";
				return true;
			}
</script>

表单定义

<div>
			<form action="Success.html" method="get" enctype="multipart/form-data">
			&ensp;用户名&ensp;:<input type="text" id="userName" name="userName" placeholder="请输入用户名" required="required" onblur="validateName()">
			<span id="nameMsg">用户名长度至少6位</span>
			</form>
</div>

界面效果展示

用户名长度必须大于8位