JS(JavaScript),最先听到的时候以为是和java一样，必须要学的，但是后来接触到后，才发现是不一样的，JS一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果（来源百度百科）。

本文主要是讲将JS如何嵌入HTML中实现表单的验证，会简单介绍下HTML、CSS、JS的内容，以及正则表达式，由于笔者还是个初学者，所以不会很深入，很多地方也是有点模糊不清，不对之处，还望多多指教，觉得不错还请点个赞！

互联网的三大基石

URL(Uniform Resource Location)：‘统一资源定位符’–相当于定位信号
HTTP(HyperText Transfer Protocol)：‘超文本传输协议’
HTML(Hyper Text Markup Language）：’超文本标记语言‘

HTML、CSS及JavaScript的关系

HTML是网页的网页信息规范化展示的语言，也可以说是网页的骨架。
CSS是层叠样式表，如果说HTML是一个骨架的话，那CSS就是一件件衣服，装饰在骨架上。
JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，作为web页面脚步而出名，可以说没有JS的网页是没有灵魂的，因为HTML和CSS是很难实现动态网页的效果的，无法实现交互

本文实现功能

能够实现基本的表单验证，验证基础的表单格式
实现功能

HTML实现form表单

HTML的实现十分简单，语法简单易懂，容易上手，这里推荐学习w3school在线教程：
里面有关于HTML的一切。
从实现效果上看form表单中，需要有我们的input标签，还有我们的span标签，布局我们可以用table表格标签或者ul无序列表等，但是相对于我们想实现的功能table布局会更简单。
这里不多加赘述，源码在后面。

JavaScript实现动态验证

JS中DOM元素

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
简单点讲，DOM提供了我们通过JS操作HTML节点元素的方法

  • 通过 id 查找 HTML 元素
  • 通过标签名查找 HTML 元素
  • 通过类名查找 HTML 元素
  • 通过 CSS 选择器查找 HTML 元素
  • 通过 HTML 对象集合查找 HTML 元素

下面只讲解id的操作

var uid=document.getElementById(id);    这里我们可以获得相应id的对象赋予uid,接下来我们就可以对这个id所处的对象进行操作了

还有其他相对应的方法，具体可以查阅W3C的相关文档。

正则表达式

我们实现用户名验证，规定用户名和密码格式时，是不是有时候会需要一定的格式，比如只能输入3到5个汉字，密码必须在4-6位数字之间，还有邮件的格式等等，再到后面我们想学习爬虫，都是需要用到正则表达式

^[\u4e00-\u9fa5]{m,n}$     校验汉字在m-n位之间，\u4e00-\u9fa5是用来判断是不是中文的一个条件
^\d{m}$    数字校验，{m}是检验数字长度是不是为m,{m,n}检验数字长度在不在m到n之间
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/    邮箱验证

以上便是本文用到的三种正则化表达式，以前学习的时候都不知道正则化的作用，随着学习的深入越发觉得强大，在这里再给大家推荐一篇博文，里面总结了大量的正则化表达式，十分有用。

JS如何应用正则化表达式

reg=/^[\u4e00-\u9fa5]{3,5}$/     JS引用格式即/正则表达式/
reg.test(value)       test()测试方法，会验证vale里面的东西是否符合正则表达式，是返回ture, 否返回False

JS如何生成随机验证码

JS中的Math对象，用于执行数学任务。
Math.random 会返回0-1之间的随机数，这里我们要清楚我们需要的是4位验证码，所以0-1想化为四位数，就要乘以10000,然后再向下取整，但是如果乘以10000，会有个问题，我随机生成的是0.045849怎么办，就算乘以10000也只是三位数，不符合我们的要求，那么为了保证一直为4位数，我们可以乘以9000后+1000，这样即使生成的是0.001，0.001*9000+1000=1009，无论怎样都能保证生成的是四位随机数。

			 function YZM(){
				 // 四位随机整数
				 var ran=Math.floor(Math.random()*9000+1000);
				 //获得span对象
				 var span=document.getElementById("yzm_span");
				 span.innerText=ran; 
			 }

JS验证用户名和密码

这里的语法很简单，可以通过备注来实现，后续的几个验证也是大同小异

			 function check(id,reg){
			 	 // 获得id对象
				 var uid=document.getElementById(id);
				 // 获得id对象中的value属性和alt属性
				 var value=uid.value;
				 var alt=uid.alt;
				 // 获得span对象，用于操作和提示信息
				 var span=document.getElementById(id+"_span");
				 // 简单的逻辑判断，是不是符合正则表达式
				 if (reg.test(value)){
				 	// 对span里面的文本进行操作
				 	span.innerText=alt+"合法";
				 	// 对span里面的文本颜色进行操作
					span.style.color="green";	
					// 返回true，用于最后提交时的表单校验
					return true;
	 				}	
				else{
				 	span.innerText=alt+"不合法";
					span.style.color="red";
					return false;
	 				}
			}

JS同意协议后方可注册

最后的注册按钮有一个特别的属性disabled，有一个禁用输入字段的 HTML 表单，当它为”true“或者"disabled"时，按钮成灰色的，无法注册，我们需要通过操作节点改变他的属性来实现这个功能

function checkAgree(){		
	var check=document.getElementById("check");
    var sub=document.getElementById("sub");	
    sub.disabled=!check.checked;
}

JS表单提交后验证表单，判断是否阻止表单提交

我们需要再提交表单时验证程序，可以onsubmit属性，这样我们点击提交时会执行zong方法（我书写的验证表单的方法），依据返回的ture和false判断是否提交表单。

<form action="" method="get" onsubmit="return zong()">

zong(方法)调用所有表单验证方法，只要有一个为false则返回false

function zong(){
var flag=checkName()&&checkPwd()&&checkPhone()&&checkEmail()&&checkSex()&&checkFav()&&checkAdress()&&checkYZM();					return flag;
	}

全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*验证码生成*/
			 function YZM(){
				 // 四位随机整数
				 var ran=Math.floor(Math.random()*9000+1000);
				 //获得span对象
				 var span=document.getElementById("yzm_span");
				 span.innerText=ran; 
			 }
			 // 校验用户名方法
			 function check(id,reg){
				 var uid=document.getElementById(id);
				 var value=uid.value;
				 var alt=uid.alt;
				 var span=document.getElementById(id+"_span");
				 if (reg.test(value)){
				 	span.innerText=alt+"合法";
					span.style.color="green";	
					return true;
	 				}	
				else{
				 	span.innerText=alt+"不合法";
					span.style.color="red";
					return false;
	 				}
			}
			 /********用户名检验**********/ 
			 function checkName(){
				 var reg=/^[\u4e00-\u9fa5]{3,5}$/;
				 return check("uname",reg);
			 }
			 /********密码检验**********/ 
			 function checkPwd(){
				 var reg=/^\d{3,6}$/;
				 return check("pwd",reg);
			 }
			 /********手机号检验**********/ 
			 function checkPhone(){
				 var reg=/^\d{11}$/;
				 return check("phone",reg);
			 }
			 /********邮箱检验**********/ 
			 function checkEmail(){
				 var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				 return check("email",reg);
			 }
			 /********性别检验**********/ 
			 function checkSex(){
				 return checkSex_Fav('sex')
			 }
			 function checkFav(){
				 return checkSex_Fav('fav')
			 }
			 function checkSex_Fav(name){
				 //获得所有性别对象
				 var uname=document.getElementsByName(name);
				 //获得span对象
				 var span=document.getElementById(name+"_span");
				 for(var i in uname){
					 if(uname[i].checked){
						 span.innerHTML="选择成功";
						 span.style.color="green"
						 return true;
					 }
				 }
				 
				 span.innerHTML="请选择";
				 span.style.color="red";
				 return false;
				 
			 }
			 /********籍贯检验**********/
			 function checkAdress(){
				 var value=document.getElementById("sel").value;
				 var span=document.getElementById("sel_span");
				 if (value!=0){
					 span.innerText="籍贯选择成功";
					 span.style.color="green";
					 return true;
				 }
				 else{
					 span.innerText="籍贯未选择";
					 span.style.color="red";
					 return false;
				 }
			 }
			 /********验证码检验**********/
			 function checkYZM(){
				var value=document.getElementById("yzm").value;
				var span=document.getElementById("yzm_span");
				var span2=document.getElementById("yzm2_span");
				if(value==span.innerText){
					span2.innerText="验证码输入正确";
					span2.style.color="green";
					return true;
					
				}
				else{
					span2.innerText="验证码输入错误";
					span2.style.color="red";
					YZM();
					return false;
				}
			 }
			 /********是否同意协议**********/
			 function checkAgree(){
				 var check=document.getElementById("check");
				 var sub=document.getElementById("sub");
				 sub.disabled=!check.checked;
			 }
			 
			 /********校验表单**********/
			 function zong(){
				 var flag=checkName()&&checkPwd()&&checkPhone()&&checkEmail()&&checkSex()&&checkFav()&&checkAdress()&&checkYZM();
				 return flag;
			 }
		</script>
	</head>
	<body onload="YZM()">
		<center>
			<h3>注册页面</h3>
			<hr />
			<!-- οnsubmit="return zong()" -->
			<form action="" method="get" onsubmit="return zong()">
				<table>
					<tr height="35px">
						<td width="150px">用户名：</td>
						<td width="400px">
							<input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkName()"/>
						    <span id="uname_span">*用户名必须是3-5位的汉字</span>
						</td>
					</tr>
					<tr height="35px">
						<td>密码：</td>
						<td>
							<input type="password" name="pwd" id="pwd" value="" alt="密码" onblur="checkPwd()"/>
							<span id="pwd_span"></span>
							
						</td>
					</tr>
					<tr height="35px">
						<td>手机号：</td>
						<td>
							<input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/>
							<span id="phone_span"></span>
						</td>
					</tr>
					<tr height="35px">
						<td>邮箱：</td>
						<td>
							<input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()" />
						    <span id="email_span"></span>
						</td>
					</tr>
					<tr height="35px">
						<td>性别：</td>
						<td>
							男：<input type="radio" name="sex" id="" value="1" onclick="checkSex()"/>
							女：<input type="radio" name="sex" id="" value="0" onclick="checkSex()"/>
							
							<span id="sex_span">
								
							</span>
						</td>
					</tr>
					<tr height="35px">
						<td>爱好：</td>
						<td>
							<input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>唱歌
							<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉
							<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>LOL<br />
							<input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>旅游
							<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>高尔夫
							<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()"/>篮球
							<span id="fav_span">
								
							</span>
						</td>
	
					</tr>
					<tr height="35px">
						<td>籍贯：</td>
						<td>
							<select name="adress" id="sel" onchange="checkAdress()">
								<option value="0">--请选择--</option>
								<option value="1">河南</option>
								<option value="2">湖南</option>
								<option value="3">海南</option>
								<option value="4">云南</option>
							</select>
							
							<span id="sel_span"></span>
						</td>
					</tr>
					
					<tr height="35px">
						<td>验证码</td>
						<td>
							<input type="number" name="" id="yzm" value="" onblur="checkYZM()"/>
							<span id="yzm_span"></span>
							<span id="yzm2_span"></span>
						</td>
					</tr>
					
					<tr height="35px">
						<td>个人介绍：</td>
						<td>
							<textarea name="intro" rows="8" cols="30"></textarea>
						</td>
					</tr>
					
					<tr height="35px">
						<td colspan="2" align="center">
							<input type="checkbox" name="" id="check" value="" onclick="checkAgree()">是否同意本公司协议
						</td>
					</tr>
					<tr height="35px">
						<td colspan="2" align="center">
							<input type="submit" id="sub" value="注册" disabled="true" />
						</td>
					</tr>
				</table>
			</form>
		</center>
	</body>
</html>

简单的表单验证已经做完了，大家能给个赞鼓励下吗！！！

Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

HAS2024：华为云以系统性创新加速千行万业智能化升级

avatar 华为云开发者联盟
cover

数仓的两种轻量级数据交换格式：json与jsonb

avatar 华为云开发者联盟
cover

如何使用云数据库GaussDB管理平台进行实例安装？

avatar 华为云开发者联盟