js 强校验弱校验_js中表单的校验

最新推荐文章于 2022-07-07 11:54:46 发布

金山文档

最新推荐文章于 2022-07-07 11:54:46 发布

阅读量271

点赞数

文章标签： js 强校验弱校验

本文链接：https://blog.csdn.net/weixin_35827472/article/details/112078777

版权

首先我们需要先创建 html 静态页面的注册页面

<body onload="YZM()">
		<center>
		<h3>注册页面</h3>
		<hr />
		<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="手机号" />
					<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" />唱歌
					<input type="checkbox" name="fav" id="" value="2" />睡觉
					<input type="checkbox" name="fav" id="" value="3"  />LOL<br />
					<input type="checkbox" name="fav" id="" value="4"  />旅游
					<input type="checkbox" name="fav" id="" value="5" />高尔夫
					<input type="checkbox" name="fav" id="" value="6" />篮球
					
				</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>

创建完整个注册表

然后写校验公共的方法

/***********提取公共的部分***************/
			function  check(id,reg){
			
				//获得密码的值
				var  uname=document.getElementById(id);
				
				var  val=uname.value;
				
				//获得alt属性
				var  alt=uname.alt;
				
				//获得span对象
				var span =document.getElementById(id+"_span");
				
				if(val==null||val==""){
					
					
					span.innerText="×"+alt+"不能为空";
					
					span.style.color="red";
					
					return false;
					
				}else if(reg.test(val)){
					
					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  checkEmail(){
				//邮箱的正则表达式
				
				var  reg=/^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
				
			return	check("email",reg);
			}
			
			
			/*********密码邮箱方法**************/
			
			function  checkPwd(){
				//密码的正则表达式
				
				var  reg=/^d{3,6}$/;
				
			return	check("pwd",reg);
			}
			

var  ran;
			/**********验证码生成**********/
			function  YZM(){
				
				//4位随机整数
			    ran=Math.floor(Math.random()*9000+1000);
				//获得span对象
				var span =document.getElementById("yzm_span");
				
				span.innerText=ran;
			}
			
			/*********校验用户名方法**************/
			
			function  checkName(){
		
				//汉字的正则表达式
				var  reg=/^[u4e00-u9fa5]{3,5}$/;
				
				return check("uname",reg);
			}

补充正则表达式的使用

 * 正则表达式：
			 *    
			 * 正则表达式是对于数据格式进行一定的规范限制
			 * 
			 * 
			 * ^：开始
			 * [0-9]  [a-z A-Z] :数字  字母
			 * 
			 * {2,4} ：段域 至少是2位  最多是4位
			 * {3}:指定范围就是3位
			 * {2,}:至少是2位
			 *  $:结束
			 * 
			 * d：[0-9]
			 * 
			 * w[0-9 a-z A-Z]
			 * 
			 * */

最好统一验证所有元素都有写没有

如果写了就返回true可以注册

/*******是否统一协议**********/
			function  checkAgree(){
				//同意框
				var  check=document.getElementById("check");
				//提交
				var  sub=document.getElementById("sub");
				
				sub.disabled=!check.checked;
				
				
				
			}
			
			function zong(){
				
			  var  flag=checkName()&&checkPwd()&&checkSex()&&checkYZM()&&checkAgree()&&checkEmail();
				
				
		     return flag;		
			}

然后加载from表单时侯验证元素是否都写了如果写了就提交

<h3>注册页面</h3>
		<hr />
		<form action="" method="get" onsubmit="return zong()">

金山文档

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

js 强校验 弱校验_js中表单的校验

js 强校验弱校验_js中表单的校验