1. 程式人生 > >值得收藏的八個常用的js正則表示式

值得收藏的八個常用的js正則表示式

 開發中如果有input輸入框,難免就要寫正則表示式,因此在這裡總結了一些常見常用的正則表示式的書寫方法,希望會大家有所幫助;

附圖:  

一.手機號碼

$(document).ready(function(){
  //判斷輸入手機號碼是否正確
  $("#telephone").focus(function(){
     document.getElementById("ph-hint").innerHTML = ":open_mouth:請輸入11位手機號碼";
 
  })
  $("#telephone").blur(function(){
     if(/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)){
        document.getElementById("ph-hint").innerHTML = "";
     }else if(document.getElementById("telephone").value == ""){
         document.getElementById("ph-hint").innerHTML = " 咦,手機號不能為空哦";
     }else{
        document.getElementById("ph-hint").innerHTML = " 這好像不是一個手機號碼哦";
        document.getElementById("telephone").value = "";
     }
  })
})

詳解:當獲取焦點時,提示文字請輸入手機號,然後失去焦點時判斷,那段正則表示式表示的是13幾,這個幾0-9都可以,或者15幾,但是非4的都行,或者18幾,0-9都可以,然後再加8位數字,符合條件則成功,否則根據情況判斷提示文字;

前端全棧學習交流圈:866109386 面向1-3經驗年前端開發人員 幫助突破技術瓶頸,提升思維能力

二.密碼

$(document).ready(function(){
  //判斷輸入密碼格式是否正確
  $("#setpassword").focus(function(){
     document.getElementById("pw-hint").innerHTML = ":open_mouth:請您輸入密碼,6-15個字母數字和符號兩種以上組合";
 
  })
  $("#setpassword").blur(function(){
     if(/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![,\.#%'\+\*\-:;^_`]+$)[,\.#%'\+\*\-:;^_`0-9A-Za-z]{6,15}$/.test(this.value)){
        document.getElementById("pw-hint").innerHTML = "";
     }else if(document.getElementById("setpassword").value == ""){
         document.getElementById("pw-hint").innerHTML = " 咦,密碼不能為空哦";
     }else{
        document.getElementById("pw-hint").innerHTML = " 你的密碼格式有誤,請重新輸入";
        document.getElementById("setpassword").value = "";
     }
  })
})

詳解:當獲取焦點時,提示文字請輸入密碼,然後失去焦點時判斷,那段正則表示式表示的是可以輸入0-9的數字和大小寫的字母a-z,外加一些特殊符號,然後可以輸入6-15位密碼,符合條件則成功,否則根據情況判斷提示文字;

以下格式我就不這樣寫了,簡介一點,上面兩段可以去參考。

三.使用者名稱

//使用者名稱正則,4到16位(字母,數字,下劃線,減號)
var username = /^[a-zA-Z0-9_-]{4,16}$/;
//文字
var username=/[\d]/g;

四.電子郵箱

//對電子郵件的驗證
 var email = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]
[email protected]
([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

五.身份證號

//身份證號(18位)正則
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

六.日期

//日期正則,簡單判定,未做月份及日期的判定
var time = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
//日期正則,複雜判定
var time = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;

七.QQ號以及微訊號

//QQ號正則,5至11位
var qq = /^[1-9][0-9]{4,10}$/;
//微訊號正則,6至20位,以字母開頭,字母,數字,減號,下劃線
var wx = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;

八.座機號

//座機號
var tel =/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/;

附加: 傳送驗證碼倒計時寫法

<input class="login-code-send" id="login-code-send" type="button" name="sendcode" value="傳送驗證碼" onclick="settime(this);"/>
//登入,忘記密碼的驗證碼
var counts = 60;
function settime(val) {
  if (counts == 0) {
    val.removeAttribute("disabled");
    val.value = "獲取驗證碼";
    counts = 60;
    return false;
  } else {
    val.setAttribute("disabled", true);
    val.value = "重新發送("+counts+")";
    counts--;
  }
  setTimeout(function () {
    settime(val);
  }, 1000);
}