輸入框input失去焦點就判斷是否符合正則

哈嘍我又來咯~
這次帶來的是JavaScript判斷輸入框失去焦點判斷是否滿足正則表達式~

1. 還是先看效果咯
   
2. 看完效果是不是有點小心動~不要着急現在就是大家所關心的關鍵咯
3. 我們還是先看HTMl 的代碼段

用戶名：<br/><input type="text" id="name" onblur="verName()"/><span id="nameReg"></span><br/>
密碼：<br/><input type="text" id="pwd" onblur="verPwd()"/><span id="pwdReg"></span><br/>
確認密碼：<br/><input type="text" id="pwd2" onblur="verPwd2()"/><span id="pwd2Reg"></span><br/>
郵箱：<br/><input type="text" id="mailbox" onblur="verMailbox()"/><span id="mailboxReg"></span><br/>
手機號：<br/><input type="text" id="phone" onblur="verPhone()"/><span id="phoneReg"></span><br/>
地址：<br/><input type="text" id="address" onblur="verAddress()"/><span id="addressReg"></span><br/>

4. 就是很基礎的input的使用

5. 下面是js 的代碼段

<script type="text/javascript">
    function verName() {
        //用戶名: 大寫字母開頭 6-20位字符(不允許有符號但是允許有_)
        var limitierName = /^[A-Z]\w{5,19}$/;
        reg("name", limitierName);
    }

    function verPwd() {
        //密碼:大寫開頭 數字字母符號混合 8-15位
        var limitierPwd = /^[A-Z][\w\W]{7,14}$/;
        reg("pwd", limitierPwd);
    }

    function verPwd2() {
        //確認密碼:大寫開頭 數字字母符號混合 8-15位
        var limitierPwd2 = /^[A-Z][\w\W]{7,14}$/;
        reg("pwd2", limitierPwd2);
    }

    function verMailbox() {
        //郵箱:郵箱格式
        var limitierMailbox = /^[A-z0-9]+@[a-z0-9]+.com$/;
        reg("mailbox", limitierMailbox);
    }

    function verPhone() {
        //手機號:手機號格式
        var limitierPhone = /^(13|15|17|18)\d{9}$/;
        reg("phone", limitierPhone);
    }

    function verAddress() {
        //地址: 中文開頭  數字 - 字母 中文混合
        var limitierAddress = /^[\u4e00-\u9fa5][\u4e00-\u9fa5A-Za-z0-9]+$/;
        reg("address", limitierAddress);
    }

可以寫到本頁面的哦
到這裏結束了嗎 不不不 還有

* 輸入框的校驗  消息顯示區域的ID 必須按照 eleId+"Reg"
 * @param eleId 輸入框的ID
 * @param rule 正則表達式
 */
function reg(eleId,rule){
    //動態的添加一個消息顯示標籤
    var inputValue = document.getElementById(eleId).value;
    var result = rule.test(inputValue.trim());
    if(result){
        document.getElementById(eleId+"Reg").innerHTML="√";
        document.getElementById(eleId+"Reg").style.color= "green";
    }else{
        document.getElementById(eleId+"Reg").innerHTML="×";
        document.getElementById(eleId+"Reg").style.color= "red";
    }
    

這是纔是關鍵哦
判斷是否滿足正則表達式滿足的話就會在後面顯示對號哦~

到這裏，這次的內容就真正結束了~
有什麼疑問可以在下放評論
關注我不迷路~持續爲大家帶來一些精美的分享哦