返回 导航

其他

hangge.com

js正则表达式验证手机号码,用户名和邮箱

作者：hangge | 2014-10-12 11:17
1，验证手机号码、用户名、邮箱 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>hangge.com</title>
</head>
	
<script>
	//对象选择器
	function $sel(id,tabname){
	  if(id!="" && tabname!=""){
		var tem_obj=document.getElementById(id);
		return tem_obj.getElementsByTagName(tabname);
	  }else if(id!=""){
		return document.getElementById(id);
	  }else{
		return document.getElementsByTagName(tabname);
	  }
	}
	  
	//电话号码验证
	function isnum(obj){
	  var reg=/^1[0-9]{10}/;
	  if(!reg.test(obj.value)){
		alert("请正确填写手机号！");
		obj.value="";
	  }
	}
	  
	//验证邮件格式
	function ismail(obj){
	  var reg=/[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}/;
	  if(!reg.test(obj.value)){
		alert("请正确填写邮箱！");
		obj.value="";
	  }
	}
	  
	//验证用户名格式
	function isname(obj){
	  var reg=/^[\u4e00-\u9fa5]{2,4}$/;
	  if(!reg.test(obj.value)){
		alert("请正确填写姓名！姓名为两到四个汉字。");
		obj.value="";
	  }
	}

	//初始化验证
	function init(){
		//注册一个失去焦点的事件
		$sel("phone","").onblur=function(){
		  isnum(this);
		}
		  
		$sel("mail","").onblur=function(){
		  ismail(this);
		}
		  
		$sel("username","").onblur=function(){
		  isname(this);
		}
	}	
</script>

<body onload="init()">
	<input type="text" id="username" placeholder="姓名"/><br><br>	
	<input type="text" id="phone" placeholder="手机号"/><br><br>
	<input type="text" id="mail" placeholder="邮箱地址"/>
</body>
</html>

效果图如下：


2，再次确认密码验证 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hangge.com</title>
</head>
     
<script>
    //对象选择器
    function $sel(id,tabname){
      if(id!="" && tabname!=""){
        var tem_obj=document.getElementById(id);
        return tem_obj.getElementsByTagName(tabname);
      }else if(id!=""){
        return document.getElementById(id);
      }else{
        return document.getElementsByTagName(tabname);
      }
    }
       
    //两次输入的密码验证
    function confirmPassword(obj1, obj2){     
      if(obj1.value != obj2.value){
        alert("两次输入的密码不一致！");
        obj1.value="";
      }
    }       
 
    //初始化验证
    function init(){
        //注册一个失去焦点的事件
        $sel("pwdConfirm","").onblur=function(){
          confirmPassword(this, $sel("pwdNew",""));
        }
    }  
</script>
 
<body onload="init()">
    <input type="password" id="pwdNew" placeholder="输入新密码"/><br><br>  
    <input type="password" id="pwdConfirm" placeholder="再次输入新密码"/><br><br>
</body>
</html>
评论

全部评论（5）

回到顶部