姓名，電話號碼，郵箱的正則檢測

時間 2019-12-11

原文原文鏈接

<!DOCTYPE html> <html> 
<head> 
    <meta charset="utf-8"> 
    <title>正則表達式</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>