js表单验证处理

最新推荐文章于 2022-04-12 21:48:22 发布

Xiao祁的博客

最新推荐文章于 2022-04-12 21:48:22 发布

阅读量276

点赞数 1

分类专栏：自己总结

本文链接：https://blog.csdn.net/qq_42459672/article/details/99657291

版权

自己总结专栏收录该内容

51 篇文章 1 订阅

订阅专栏

在这里插入图片描述



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <center>
            <h3>注册界面</h3>
            <hr />
            <form action="" method="get">
                <table>
                    <tr height="35px">
                        <td width="150px">用户名：</td>
                        <td  width="400px">
                            <input type="text" name="uname" id="uname" value="" alt="用户名" />
                            <span id="uname_span">*用户名必须是3-5位的汉字</span>
                        </td>
                    </tr>
                    <tr height="35px">
                        <td>密码：</td>
                        <td>
                            <input type="password" name="pwd" id="pwd" value="" alt="密码" />
                            <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="radio" name="sex" id="" value="1" />
                            女：<input type="radio" name="sex" id="" value="2" />
                            <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">
                                <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>
                            <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=""  />是否同意本公司协议
                        </td>
                    </tr>
                    <tr height="35px">
                        <td colspan="2" align="center">
                            <input type="submit" id="sub" value="注册"  />
                        </td>
                    </tr>
                </table>
            </form>
        </center>
    </body>
</html>

js代码：

<script>
			var ran;
			/*=============验证码生成================*/
			function YZM(){
				//生成四位随机的整数
				ran=Math.floor(Math.random()*9000+1000);
				//获得span对象
				var span=document.getElementById("yzm_span");
				span.innerText=ran;
			}
			/*
				 正则表达式：
				 ^:开始
				 *:任意数
				[0-9]:数值0-9   [a-z  A-Z]字母
				{2,4}:段域    		[2,4]位数
				{3}:		指定范围就是三位 
				{2，}		至少两位
				{n,}		至少n位
				$:结束
				\d			指数字0到9[0,9]
				\w			指[0,9  a,z   A,Z ]
				 
				 * */
			
			
			/*=============校验用户名方法================*/
				function checkName(){
				//汉字的正则表达式
				var reg=/^[\u4e00-\u9fa5]{3,5}$/;		/*汉字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(){
				//获取所有性别的对象
				var sex=document.getElementsByName("sex");
				//获得span对象
				var span=document.getElementById("sex_span");
				for(var i in sex){
					if(sex[i].checked){
						span.innerHTML="性别选择成功！！";
						span.style.color="green";
						return true;
					}
				}
				span.innerHTML="请选择性别";
				span.style.color="red";
				return false;
				
			}
			/*=============校验籍贯方法================*/	
			function checkAdress(){
				var sel=document.getElementById("sel").value;
				var span=document.getElementById("sel_span");
				if(sel==0){
					span.style.color="red";
					span.innerHTML="请选择籍贯";
					return false;
				}else{
					span.style.color="green";
					span.innerText="籍贯选择成功！！";
					return true;
				}
			}
			/*=============校验验证码方法================*/	
			function checkYZM(){
				//获得自己输入的验证码
				var yzm=document.getElementById("yzm").value;
				//获得span标签
				var span=document.getElementById("yzm2_span");
				if(ran==yzm){
					span.style.color="green";
					span.innerText="验证码正确";
					return true;
				}else{
					span.style.color="red";
					span.innerText="验证码不正确";
					return false;
				}
			}
	
	
			/*=============校验验是否同意协议的方法================*/	
			
			function checkAgree(){
				//同意框
				var check=document.getElementById("check");
				//提交
				var sub=document.getElementById("sub");
				sub.disabled=!check.checked;//返回!true==false
			}
				
		/*==================提取公共部分===============================*/
		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 zong(){
			var flag=checkAdress()&&checkAgree()&&checkEmail()&&checkName()&&checkPhone()&&checkPwd()&&checkSex()&&checkYZM();
			return flag;
		}
		
		</script>