JS正則表達式驗證賬號、手機號、電話和郵箱

原創

2020-02-21 23:40

本文主要是採用js和正則表達式方便的驗證賬號、手機號、郵箱等。

具體代碼實現如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>手機號，郵箱等驗證</title>
<script type="text/javascript">
    /**
	驗證賬號是否符合合法
	驗證規則：字母、數字、下劃線組成，字母開頭，4-16位。
	*/
   function checkUser(str)
   {
       var re=/^[a-zA-Z]\w{3,15}$/;
	   if(re.test(str))
	   {
	      alert("正確！");
	   }else
	   {
	      alert("錯誤！");
	   }
   }
   
   /**
      驗證手機號碼是否輸入合法
	  驗證規則：11位數字，以1開頭
   */
   function checkMobile(str)
   {
       var re=/^1\d{10}$/;
	   if(re.test(str))
	   {
	      alert("正確！");
	   }else
	   {
	      alert("錯誤！");
	   }
   }
   
   /**
      驗證電話號碼是否輸入合法
	  驗證規則：區號+號碼，區號以0開頭，3位或4位
	  號碼由7位或8位數字組成
	  區號與號碼之間可以無連接符，也可以“-”連接
      如01088888888,010-88888888,0955-7777777 
   */
   function checkPhone(str)
   {
       re = /^0\d{2,3}-?\d{7,8}$/;
	   if(re.test(str))
	   {
	      alert("正確！");
	   }else
	   {
	      alert("錯誤！");
	   }
   }
   
   
   /**
      驗證郵箱是否輸入合法
	  驗證規則：姑且把郵箱地址分成“第一部分@第二部分”這樣
	  第一部分：由字母、數字、下劃線、短線“-”、點號“.”組成，
	  第二部分：爲一個域名，域名由字母、數字、短線“-”、域名後綴組成，
	  而域名後綴一般爲.xxx或.xxx.xx，一區的域名後綴一般爲2-4位，如cn,com,net，現在域名有的也會大於4位
   */
   function checkEmail(str)
   {
       re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
	   if(re.test(str))
	   {
	      alert("正確！");
	   }else
	   {
	      alert("錯誤！");
	   }
   }
   
    
</script>
</head>

<body>
  <label>
    請輸入賬號：<input type="text" id="user" value=""/>
	<input type="button" value="檢查賬號" οnclick="checkUser(user.value)">
  </label><br/><br/>
  
  <label>
	輸入手機號：<input type="text" id="mobile" value=""/>
	<input type="button" value="檢查手機號" οnclick="checkMobile(mobile.value)">
  </label><br/><br/>
	
	<label>
	輸入電話號：<input type="text" id="phone" value=""/>
	<input type="button" value="檢查電話號碼" οnclick="checkPhone(phone.value)">
	</label><br/><br/>
	
	<label>
	請輸入郵箱：<input type="text" id="email" value=""/>
	<input type="button" value="檢查郵箱" οnclick="checkEmail(email.value)">
	</label><br/><br/>
</body>

</html>

實現的效果如下圖所示。