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

最新推荐文章于 2023-01-16 10:13:30 发布

大可&不必

最新推荐文章于 2023-01-16 10:13:30 发布

阅读量1.4k

点赞数

文章标签： javascript正则检测用户名验证密码邮箱手机号

本文链接：https://blog.csdn.net/style201904/article/details/90667750

版权

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

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>

效果图
在这里插入图片描述