JQuery留言板demo--代碼-2-刪除數(shù)據(jù)

<!doctype html>
<html>

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

<body>
    <form action="#">
        <input id="txt_submit" type="text" name="test" placeholder="請輸入6~10個(gè)字符的中文"><span id="msg"></span>
        <button id="btn_submit" type="submit">提交</button>
    </form>
    <div id="msg_board"></div>
    <script src="js/jquery.js"></script>
    <script>
        // HTML DOM加載完成后執(zhí)行JS代碼
        $(function() {

            // 輸入框驗(yàn)證
            function check() {
                var strText = $("#txt_submit").val();

                // 必填項(xiàng)驗(yàn)證
                if ("" == strText) {
                    $("#msg").html("該輸入項(xiàng)不能為空");
                    return false;
                }

                // 最小長度驗(yàn)證
                if (strText.length < 6) {
                    $("#msg").html("輸入長度不能小于6");
                    return false;
                }

                // 最大長度驗(yàn)證
                if (strText.length > 10) {
                    $("#msg").html("輸入長度不能大于10");
                    return false;
                }

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

                // 錯(cuò)誤信息清空   
                $("#msg").html("");
                return true;

            }

            // 添加數(shù)據(jù)
            function addMsg() {

                // 創(chuàng)建div
                var temp = $("<div>");

                // 設(shè)置div文本內(nèi)容
                temp.html($("#txt_submit").val());

                // 添加div
                $("#msg_board").append(temp);

                // 創(chuàng)建刪除按鈕
                var btnDel = $("<button>");

                // 設(shè)置按鈕文字
                btnDel.text("刪除");

                // 添加數(shù)據(jù)div
                temp.append(btnDel);

                // 設(shè)置單擊事件--單擊刪除當(dāng)前數(shù)據(jù)
                btnDel.click(function() {
                    // 刪除按鈕所在的div
                    $(this).parent().remove();
                });


                // 清空輸入框
                $("#txt_submit").val("");
            }

            // 提交時(shí)驗(yàn)證
            $("#btn_submit").click(function() {
                // 如果驗(yàn)證失敗返回
                if (check()) {
                    addMsg();
                }

                // 返回false,禁用提交,不刷新頁面
                return false;

            });

            // 輸入時(shí)驗(yàn)證
            $("#txt_submit").keyup(check);

            // JS代碼到此為止 
        });

    </script>

</body>

</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容