Javascript留言板demo--代碼-1-添加數據

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Javascript留言板</title>
</head>

<body>

    <form action="#">
        <input id="txt_submit" type="text" name="test" placeholder="請輸入6~10個字符的中文"><span id="msg"></span>
        <button id="btn_submit" type="submit">提交</button>
    </form>
    <div id="msg_board"></div>

    <script>
        // HTML文檔加載完成后執行JS代碼
        window.onload = function() {
            // 獲取輸入框
            var txt_submit = document.getElementById("txt_submit");

            // 獲取提交按鈕
            var btn_submit = document.getElementById("btn_submit");

            // 獲取信息span
            var msg = document.getElementById("msg");

            // 獲取信息span
            var msg_board = document.getElementById("msg_board");

            // 輸入框驗證
            function check() {
                // 獲取文本內容
                var strText = txt_submit.value;

                // 必填項驗證
                if ("" == strText) {
                    msg.innerHTML = "該輸入項不能為空";
                    return false;
                }

                // 最小長度驗證
                if (strText.length < 6) {
                    msg.innerHTML = "輸入長度不能小于6";
                    return false;
                }

                // 最大長度驗證
                if (strText.length > 10) {
                    msg.innerHTML = "輸入長度不能大于10";
                    return false;
                }

                // 漢字驗證
                if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
                    msg.innerHTML = "必須輸入漢字";
                    return false;
                }

                // 錯誤信息清空   
                msg.innerHTML = "";
                return true;

            };

            // 添加數據
            function addMsg() {
                // 創建div
                var temp = document.createElement("div");

                // 設置div文本內容
                temp.innerHTML = txt_submit.value;

                // 添加div
                msg_board.appendChild(temp);

                // 清空輸入框
                txt_submit.value = "";
            }

            btn_submit.onclick = function() {
                // 如果驗證失敗返回
                if (check()) {
                    addMsg();
                }

                // 返回false,禁用提交,不刷新頁面
                return false;
            };
            txt_submit.onkeyup = check;

            // JS代碼到此為止  
        };

    </script>
</body>

</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容