当前位置: > > > js正则表达式验证手机号码,用户名和邮箱

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

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
  • 5楼
    2016-09-28 14:41
    酒干倘卖无

    站长好厉害啊,什么都会,棒棒的,我想问一下,现在swift3.0了,请问站长大人,有没有最新的,给推荐一下呗,么么哒

    站长回复

    谢谢夸奖。你说的推荐最新的指什么?

  • 4楼
    2016-07-28 10:24
    Hero11223

    航哥,求教个问题,就是有webStorm开发H5,在mac搭建开发环境,有相关的信息没,如果有的话,能不能提供一下,我给航哥发红包包!

    站长回复

    webStorm我其实还没用过,暂时帮不了你了。

  • 3楼
    2016-05-05 14:26
    呵呵哒

    可以不用对象选择器嘛

    站长回复

    当然可以,添加对象选择器就为了使用起来简单点。可以不需要通过对象选择器,直接用getElementById获取对象。

    比如:
    $sel("phone","").onblur=function(){
    改成:
    document.getElementById("phone").onblur=function(){

  • 2楼
    2016-04-08 14:15
    小北

    可以把再次确认密码的加上吗?谢谢

    站长回复

    可以,现已更新。

  • 1楼
    2015-10-09 10:57
    饭饱饱

    test()??

    站长回复

    ??? 测试了下,可以使用