JQuery留言板demo--代码-2-删除数据

<!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个字符的中文"><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加载完成后执行JS代码
        $(function() {

            // 输入框验证
            function check() {
                var strText = $("#txt_submit").val();

                // 必填项验证
                if ("" == strText) {
                    $("#msg").html("该输入项不能为空");
                    return false;
                }

                // 最小长度验证
                if (strText.length < 6) {
                    $("#msg").html("输入长度不能小于6");
                    return false;
                }

                // 最大长度验证
                if (strText.length > 10) {
                    $("#msg").html("输入长度不能大于10");
                    return false;
                }

                // 汉字验证
                if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
                    $("#msg").html("必须输入汉字");
                    return false;
                }

                // 错误信息清空   
                $("#msg").html("");
                return true;

            }

            // 添加数据
            function addMsg() {

                // 创建div
                var temp = $("<div>");

                // 设置div文本内容
                temp.html($("#txt_submit").val());

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

                // 创建删除按钮
                var btnDel = $("<button>");

                // 设置按钮文字
                btnDel.text("删除");

                // 添加数据div
                temp.append(btnDel);

                // 设置单击事件--单击删除当前数据
                btnDel.click(function() {
                    // 删除按钮所在的div
                    $(this).parent().remove();
                });


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

            // 提交时验证
            $("#btn_submit").click(function() {
                // 如果验证失败返回
                if (check()) {
                    addMsg();
                }

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

            });

            // 输入时验证
            $("#txt_submit").keyup(check);

            // JS代码到此为止 
        });

    </script>

</body>

</html>
最后编辑于：2017.12.05 07:43:53
JQuery留言板demo--代码-2-删除数据

推荐阅读更多精彩内容
