javascript正则检测用户名验证密码邮箱手机号

╰半夏微凉° 2022-01-26 14:23 275阅读 0赞

## 正则验证用户名密码手机号邮箱 ##

html
    <body>
    		
    		<form>
    
    		
    		<div>			
    		请输入账号：<input type="text" id="userName" onblur="checkU()"/>*用户名以字母开头，必须字母和数字的组合
    		<div class="reUser" style="font-size: 15px;"></div>
    		</div>
    		
    		
    		<div>
    		请输入密码：<input type="text" id="password" onblur="checkP()"/>*必须字母和数字的组合5--10
    		<div class="reUser" style="font-size: 15px;"> </div>
    		</div>
    		
    		
    		<div>
    		 请输入手机号：<input type="text" id="tel" onblur="checkT()"/>
    		<div class="reUser" style="font-size: 15px;"></div>
    		</div>
    		
    		
            <div>
                            请输入邮箱：<input type="text" id="mail" onblur="checkM()"/>
            <div class="reUser" style="font-size: 15px;"></div>
            </div>
            
    		<button>提交</button>
    	</form>
    	</body>

js
    <script type="text/javascript">
    		var reU = document.getElementsByClassName("reUser");
    		var btn = document.getElementsByTagName('form')[0];
    		
    	
    		/*用户名验证*/
    	 function checkU() {  
    		var u = document.getElementById("userName");
    		var reU = document.getElementsByClassName("reUser")[0];
    	    if(u.value.length<2 || u.value.length>12){     //检测用户名   /^[a-zA-Z](?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,15}$/;
    	          reU.innerHTML = "错误";
    	          reU.style.color='red';
    	    }
    	    else {
    	          reU.innerHTML = "";
    	    }
    	}
    	
    	//检查密码格式
    	   function checkP(){ 
    	     var p = document.getElementById("password");
    	    var reU = document.getElementsByClassName("reUser")[1];
    	     var reg = /^\w{6,18}$/;    //检测密码   /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,10}$/;
    	     if(!reg.test(p.value)){
    	         reU.innerHTML = "错误";
    	        reU.style.color='red';
    	     }else {
    	         reU.innerHTML = "";
    	     }
    	   }
    	//检查手机号格式
    	   function checkT() { 
    		var t = document.getElementById("tel");
    		var reU = document.getElementsByClassName("reUser")[2];
    		var reg = /^1[3578][0-9]{9}$/;  //检测手机号码     /^(13[0-9]|14[5-7]|15[0-9]|17[0-7]|18[0-9]|19[0-9])\d{8}$/;
    		if(!reg.test(t.value)){
    		   reU.innerHTML = "错误";
    		    reU.style.color='red';
    		}
    		else {
    		   reU.innerHTML = "";
    		}
    	}
    	   //邮箱的验证 
    	   function checkM(){
    	   	  var m = document.getElementById('mail');
    	   	 var reU = document.getElementsByClassName("reUser")[3];
    	   	  var reg = /^\w*@[-a-zA-Z0-9]{1,20}\.[0-9a-z]{2,3}$/;     //检测邮箱  
    	   	  if(!reg.test(m.value)){
    	   	  	reU.innerHTML = '错误';
    	   	  	reU.style.color = 'red';
    	   	  }
    	   	  else{
    	   	  	reU.innerHTML = '';
    	   	  }
    	   }
    
           //提交按钮
             btn.onsubmit = function (){
             	for(var i=0;i<reU.length;i++){
             		if(reU[i].innerHTML == '错误'){
             			alert("第"+(i+1)+'错误');
             			return false;
             		}
             	}
             	alert('提交成功');
             }
               
    	</script>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220126/b655970e574746e2b83f1115a21b4930.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70 1]: /images/20220126/cb6c5850fcde46d3b17ecba378a2a733.png