js正則表單驗證（trim封裝）

阿新 • • 發佈：2019-01-29

筆記見本地js特效day05，

規律:

座機驗證：

匹配電話號碼:開頭3-4位（首位為0），後面7或8位。

(樞紐城市的座機以0開頭。人口多後8位，人口少後7位。)

姓名驗證：

只能是漢字，並且字數2-6個之間

[\u4e00-\u9fa5],unicode轉中文可以用unescape()列印轉換。

QQ驗證：

5到11位開頭是不為0的數字。
手機驗證：

手機號11位數字，而且有號段限制 13[0-9] 14[57] 15[0-9] 17[1456789] 18[0-9]

郵箱驗證：

\w單詞字元包括：英文字母，數字，下劃線（不包括中劃線）姓名的中劃線可以出現0次或多次。

封裝trim方法：
在做表單驗證的時候，我們經常需要檢查輸入框是否為空，
一個簡單的做法是判斷value==”“;

但是如果使用者輸入了空格或者縮排等字元，
這個判斷就不起作用了。

PHP有一個很好的函式trim可以去除字串首尾的空白字元，雖然舊版原生js並沒有提供
這個函式，但是我們可以自定義一個函式。

替換掉開頭和結尾的空白符
return str.replace(/^\s+|\s+$/g,”“);

<body>
  <script>
  /*獲取輸入框*/
    var inpQQ =document.getElementById('inp1');
    var inpMobile =document.getElementById('inp2');
    var 
 inpEmail=document.getElementById('inp3');
    var inpTel=document.getElementById('inp4');
    var inpName=document.getElementById('inp5');
    var inp6=document.getElementById('inp6');
//輸入框對應的規律
    var regQQ=/^[1-9]\d{4,10}$/;
    var regMobile=/^(13[0-9]|14[57]|15[0-9]|17[1456789]|18[0-9])\d{8}$/;
    var 
 regEmail=/^\w+([-+.]\w+)*@\w+([-.]\w+)\.\w+$/;//*號出現0次或多次，中括號外的點號需要轉義。表示域名的只有減號和點號
    var regTel=/^\d{2,3}-\d{7,8}$/;
    var regName=/^[\u4e00-\u9fa5]{2,6}$/;
//繫結事件呼叫函式
    check(inpQQ,regQQ);
    check(inpMobile,regMobile);
    check(inpEmail,regEmail);
    check(inpName,regName);
    check(inpTel,regTel);
/*封裝函式：*/
function check(inp,regEx){/*check傳參（輸入物件，正則規則）*/
  inp.onblur=function () {
       if (regEx.test(this.value)) {
        this.nextSibling.innerHTML="正確";
        this.nextSibling.className="right";
       }else{
        this.nextSibling.innerHTML="錯誤";
        this.nextSibling.className="wrong";
      }
    }
}

inp6.onblur=function  () {
  if (trim(this.value) === "") {
    this.nextSibling.innerHTML="輸入不能為空";
    this.nextSibling.className="wrong";
  }else{
    this.nextSibling.innerHTML="正確";
    this.nextSibling.className="right";
  }
};
function trim(str){
  return str.replace(/^\s+|\s+$/g,"");//開啟全域性模式，替換完開頭的，接著替換結尾。
}
  </script>
</body>

js正則表單驗證（trim封裝）

js正則表單驗證（trim封裝）

PHP常用(正則)表單驗證類

微信小程式開發之表單驗證（WxValidate使用）

通過ajax和json進行表單驗證（非同步載入）

js實驗-表單驗證（正則表示式）

js正則表達式--驗證表單

表單驗證（正則表示式）

angular js h5關於表單驗證的例子

表單驗證（為後期功能完善添加）

登錄頁面的表單驗證（登錄+密碼）

15/18位身份證號碼驗證的正則表達式總結（詳細版）

JS正則表達式驗證

汽車車牌JS正則表達式驗證(含新能源車牌)

JS正則表達式驗證是否為11位有效手機號碼,

用 jQuery 實現表單驗證（轉載）

JS正則表達式驗證數字非常全

JS正則表達式驗證各種數字類型

JS正則對象 RegExp（有變量的時候使用），用來匹配搜索關鍵字（標紅）

php正則表達式驗證（郵件地址、Url地址、電話號碼、郵政編碼）

js 正則表達式驗證密碼、郵箱格式.....

js正則表單驗證（trim封裝）

相關推薦