【Go 語言社群】www.golangweb.com通過工信部稽核，正式掛牌社群域名

阿新 • • 發佈：2022-05-04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            margin: 0 auto;
        }

        .errors {
            width: 10px;
            height: 10px;
            background-color: #f5b445 
;
        }

        .esa {
            width: 100px;
            height: 100px;
            background-color: #4587f5;
        }
        .success{
            width: 100px;
            height: 100px;
            background-color: #0cd952;
        }
    </style>
</head>
<body>
<table>
    < 
tr>
        <th>使用者名稱稱：</th>
        <td>
            <input type="text" name="username" placeholder="長度4~12，英文大小寫字母">
        </td>
        <td>
            <div></div>
        </td>
    </tr>
    <tr>
        <th>密碼：</th>
        < 
td>
            <input type="text" name="password" type="password" placeholder="長度6~20,大小寫字母，數字，下劃線">
        </td>
        <td>
            <div></div>
        </td>
    </tr>
    <tr>
        <th>確認密碼：</th>
        <td>
            <input type="text" name="repwd" type="password" placeholder="再次輸入密碼進行確認">
        </td>
        <td>
            <div></div>
        </td>
    </tr>
    <tr>
        <th>手機號碼：</th>
        <td>
            <input type="text" name="tel" placeholder="13，14，15，17，18開頭的11位手機號">
        </td>
        <td>
            <div></div>
        </td>
    </tr>
    <tr>
        <th>電子郵箱：</th>
        <td>
            <input type="text" name="email" placeholder="使用者名稱@域名（域名後輟至少2個字元）">
        </td>
        <td>
            <div></div>
        </td>
    </tr>
    <tr>
        <td colspan="3"><input type="submit" value="註冊"></td>
    </tr>
</table>
<!--<div class="esa" id="es">qingshuru</div>-->
</body>
</html>
<script>
    const es = document.getElementById('es')
    // 新增事件
    //    獲取所有的input元素
    const inputs = document.getElementsByTagName('input');
    //   為每個input元素新增失去焦點事件
    for (let i = 0; i < inputs.length - 1; i++) {
        inputs[i].onblur = inputBlur;
    }

    //  編寫inputBlur()事件處理函式   編寫inputBlur事件處理函式，獲取對應input元素的驗證規則和提示資訊，對使用者輸入的內容進行驗證，並將驗證結果顯示到HTML頁面上，具體程式碼如下
    function inputBlur() {
        const name = this.name;//獲取輸入框的name值
        let val = this.value;//獲取輸入框的value值
        const tips = this.pl;//獲取輸入框的placeholder提示資訊
        //    獲取提示資訊顯示的div元素物件
        const tips_obj = this.parentNode.nextSibling.firstChild;
        //    去掉兩端的空白符
        val = val.trim()
        //    文字框內容為空,給出提示資訊
        if (!val) {
            error(tips_obj, '輸入框不能為空');
            return false;
        }
        // 獲取正則匹配規則和提示資訊
        const reg_msg = getRegMsg(name, tips);//用於呼叫自定義函式getRegMsg()獲取該文字框對應的正則和自定義的提示資訊。
        console.log(reg_msg)//測試getRegMsg函式


    //   表單驗證
        if(reg_msg['reg'].test(val)){
        //    匹配成功，顯示成功的提示資訊
        success(tips_obj,reg_msg['msg']['success']);
        }else {
        //    匹配失敗，顯示失敗的提示資訊
            error(tips_obj,reg_msg['msg']['success'])
        }
    }

    //建立顯示錯誤資訊的error函式，該函式的第1個引數表示顯示提示資訊的元素物件，第2個引數為自定義的錯誤提示資訊，具體程式碼如下
    function error(obj, msg) {//顯示驗證失敗提示資訊
        obj.className = "errors";//將錯誤資訊提示的class設定為error
        obj.innerHTML = msg + ',請重新輸入';
    }

    //    獲取驗證規則和提示資訊
    //    編寫 getRegMsg()函式，根據input的name屬性值獲取不同狀態下的正則匹配模型式，同時傳入文字框中預設的提示資訊，作為驗證失敗的一個提示資訊。
    //    正則表示式所表達的為placeholder預設值
    function getRegMsg(name, tips) {
        let reg = '';
        let msg = '';
        switch (name) {
            case 'username':
                reg = /^[a-zA-Z]{4,12}$/;
                msg = {'success': '使用者名稱輸入正確', 'error': tips};
                break;
            case 'password':
                reg = /^\w{6,20}$/;
                msg = {'success': '密碼輸入正確', 'error': tips};
                break;
            case 'repwd':
                const con = document.getElementsByTagName('input')[1].value;
                reg = RegExp('^' + con + '$');
                msg = {'success': '兩次輸入的密碼一致', 'error': tips};
                break;
            case 'tel':
                reg = /^1[34578]\d{9}$/;
                msg = {'success': '手機號碼輸入正確', 'error': tips};
                break;
            case 'email':
                reg = /^(\w+(\_|\-|\.)*)+@(\w+(\-)?)+(\.\w{2,})+$/;
                msg = {'success': '郵箱輸入正確', 'error': tips};
                break;
        }
        return {'reg': reg, 'msg': msg};
    }

    //   編寫成功函式；實現驗證通過的提示資訊
    function success(obj, msg) {
        obj.success = 'success';
        obj.innerHTML = msg;
    }

</script>