網頁

2020/5/11

初學JavaScript寫的表單輸入驗證程式

剛學JavaScript的時候寫的code,令人懷念的深層if else。

打開後發現根本無法檢核輸入:p。不知從哪查到加上自己試誤拼湊的正則表示式。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>製做表單</title>
    <script src="Calendar/CombinedCompact/CalendarPopup.js"></script>
    <script>
        var cal = new CalendarPopup();

        window.onload = function () {
            document.getElementById("idName").onblur = checkName;
            document.getElementById("idName").onfocus = clearrt1;
            document.getElementById("idPwd").onblur = checkPwd;
            document.getElementById("idPwd").onfocus = clearrt2;
            document.getElementById("idDate").onblur = checkDate;
            document.getElementById("idDate").onfocus = clearrt3;
        }

        function clearrt1() {
            document.getElementById("rt1").innerHTML = " ";
        }
        function clearrt2() {
            document.getElementById("rt2").innerHTML = " ";
        }
        function clearrt3() {
            document.getElementById("rt3").innerHTML = " ";
        }

        function checkName() {
            var inputName = document.getElementById("idName").value;

            var re = /\s/
            if (re.test(inputName)) {
                document.getElementById("rt1").innerHTML = "<img src='forbidden16.png' class='im1' /> <span class='hint'>不可有空白</span>";
                document.getElementById("idName").value = "";  //清空欄位內容
            }//檢查是否有空白
            else {
                re = /^[^\u4e00-\u9fa5]+$/
                if (re.test(inputName)) {
                    document.getElementById("rt1").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>請輸入中文</span>";
                    document.getElementById("idName").value = "";  //清空欄位內容
                }//檢查是否為中文字
                else {
                    if (inputName.length < 2) {
                        document.getElementById("rt1").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>請輸入至少兩個中文字</span>";
                    }//檢查是否輸入2個字以上
                    else {
                        document.getElementById("rt1").innerHTML = " <img src='correct8.png' class='im1'/> ";
                       
                    }
                }
            }
        }// end of checkName()

        function checkPwd() {
            var inputPwd = document.getElementById("idPwd").value;
            var re = /\s/
            if (re.test(inputPwd)) {
                document.getElementById("rt2").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>不可有空白</span>";
                document.getElementById("idPwd").value = "";    //清空欄位內容
            }//檢查是否有空白
            else {
                re = /^[\u4e00-\u9fa5]+$/
                if (re.test(inputPwd)) {
                    document.getElementById("rt2").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>不可輸入中文</span>";
                    document.getElementById("idPwd").value = "";    //清空欄位內容
                }//檢查是否為中文字
                else {
                    if (inputPwd.length < 6) {
                        document.getElementById("rt2").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>請輸入至少六個字數符號</span>";
                        document.getElementById("idPwd").value = "";    //清空欄位內容
                    }//檢查是否輸入6個字以上
                    else {
                        re = /^[^\!\@\#\$\%\^\&\*]+$/
                        if (re.test(inputPwd)) {
                            document.getElementById("rt2").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>需包含特殊符號!@#$%^&*</span>";
                            document.getElementById("idPwd").value = "";    //清空欄位內容
                        }//檢查是否包含特殊符號
                        else {
                            re = /^[^0-9]+$/
                            if (re.test(inputPwd)) {
                                document.getElementById("rt2").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>需包含數字</span>";
                                document.getElementById("idPwd").value = "";    //清空欄位內容
                            }//檢查是否包含數字
                            else {
                                re = /^[^a-zA-Z]+$/
                                if (re.test(inputPwd)) {
                                    document.getElementById("rt2").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>需包含英文</span>";
                                    document.getElementById("idPwd").value = "";    //清空欄位內容
                                }//檢查是否包含英文
                                else {
                                    document.getElementById("rt2").innerHTML = " <img src='correct8.png' class='im1'/> ";
                                }
                            }
                        }
                    }
                }
            }

        }// end of checkPwd

        function checkDate() {
            var inputDate = document.getElementById("idDate").value;
            var re = /\s/
            if (re.test(inputDate)) {
                document.getElementById("rt3").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>不可輸入空白</span>";
                document.getElementById("idDate").value = ""    //清空欄位內容
            }
            else {
                if (inputDate == "") {
                    document.getElementById("rt3").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>請輸入日期</span>";
                }
                else {
                    re = /^((((0[13578])|([13578])|(1[02]))[\/](([1-9])|([0-2][0-9])|(3[01])))|(((0[469])|([469])|(11))[\/](([1-9])|([0-2][0-9])|(30)))|((2|02)[\/](([1-9])|([0-2][0-9]))))[\/]\d{4}$|^\d{4}$/
                    if (re.test(inputDate)) {
                        document.getElementById("rt3").innerHTML = "<img src='correct8.png' class='im1'/> ";
                    }
                    else {
                        document.getElementById("rt3").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>格式錯誤</span>";
                        document.getElementById("idDate").value = ""    //清空欄位內容
                    }
                }
                
            }
        }// end of checkDate
        
        function print_data() {
            var inputName = document.getElementById("idName").value;
            var inputPwd = document.getElementById("idPwd").value;
            var inputDate = document.getElementById("idDate").value;
            document.getElementById("div1").innerHTML = "姓名:" + inputName + "<br>密碼:" + inputPwd + "<br>日期:" + inputDate;
         
        }

    </script>
    <style>
        * {
            margin: 0;
        }

        body {
            font-family:Microsoft JhengHei;
        }

        fieldset {
            width:600px;
            padding:20px;
            border-radius:10px;
            border:none;
            box-shadow:2px 2px 10px #999;
        }

        .div_form {
            width:600px;
            margin:20px auto;
            padding:20px;
            border:none;
            box-shadow:2px 2px 10px #999;
            border-radius:10px;
            background-color:rgba(255,255,255,0.5);
        }

        .im1 {
            width:10px;
            height:10px;
            
        }

        .hint {
            font-size:0.8em;
            color:#555555;
        }

        .div_input {
            margin:10px;
        }
     
    </style>
</head>
<body>
   <!-- <fieldset>
        <legend>輸入資料</legend>-->
        <div class="div_form">
            <form name="data_entry" action="#">
                <div class="div_input">
                    姓名:<input type="text" id="idName" placeholder="請輸入姓名"/>
                    <span id="rt1"></span>
                    <br />
                    <span class='hint'>(不可空白,至少兩個字且必須為中文字)</span>
                    <br />
                </div>
                <div class="div_input">
                    密碼:<input type="password" id="idPwd" placeholder="請輸入密碼" />
                    <span id="rt2"></span>
                    <br />
                    <span class='hint'>(不可空白,不包含中文,至少六個字且必須包含英文字母,數字,特殊字元[!@#$%^&*])</span>
                    <br />
                </div>
                <div class="div_input">
                    日期:<input type="text" id="idDate" onclick="cal.select(document.forms[0].idDate, 'anchorname', 'MM/dd/yyyy'); return false;" placeholder="ex:02/29/2000" />
                    <span id="rt3"></span><a href="#" id="anchorname"></a>
                    <br />
                    <span class='hint'>(格式:月/日/西元年)</span>
                    <br />
                </div>
                <div class="div_input">
                    <input type="button" value="Reset" onclick="this.form.reset();"/>
                    <input type="submit" id="profile" value="Submit" onclick="print_data()" />
                </div>
            </form>
            <div id="div1">
            </div>        
        </div>
        <!--</fieldset>-->
        
</body>
</html>

沒有留言:

張貼留言