使用jquery前端处理空白表单提交的几种办法(有更新）

表单验空，并阻止提交。使用jquery的submit事件机制，利用event.preventDefault()阻止提交，代码如下：

<script type="text/javascript" src="/static/js/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
    function CheckNull() {
        var num = 0;
        $("input[type$='text']").each(function (n) {
            if ($(this).val() == "") {
                num++;                
            }
        });
        if (num > 0) {
            return true;
        }
        else {
            return false;
        }
    }
    $("document").ready(
        $("form").submit(function (e) {
            if (CheckNull()){
                e.preventDefault();
                $("#ErrorMessage").text("不能有空项！");
            }                
        })
    );
</script>

防止用户重复表单提交：

  var CheckSubmitFlg = false;
    function CheckSubmit() {
        if (CheckSubmitFlg == true) {
            return false;
        }
        CheckSubmitFlg = true;
        return true;
}
//利用上一段代码的submit事件
$("form").submit(function (e) {
            if (CheckSubmit()) {
                e.preventDefault();
                $("#ErrorMessage").text("不要重复提交！");
            }
        })

更好的解决办法，利用session：

  function CheckSessionFlg() {
        book_p = $("#bookname").val();
        if (book_p == $.session.get('book_session')) {
            return true;
        }
        else {
            $.session.set('book_session', book_p);
            return false;
        }
    }

这种方法需要引入库：jquerysession.js，不过你也可以自己实现它。
下载地址：https://ciphertrick.com/demo/jquerysession/js/jquerysession.js
附一些jquerysession的方法：

//添加数据
    $.session.set('key', 'value')
//删除数据
    $.session.remove('key');
//获取数据
    $.session.get('key');
//清除数据
    $.session.clear();

下面是一段使用多种方法进行表单空白验证的js代码：

<script type="text/javascript" src="/static/js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="/static/js/jquerysession.js"></script>

<script type="text/javascript">
    function CheckNull() {
        var num = 1;
        $("input[type$='text']").each(function (n) {
            if ($(this).attr("name") == "wechat") {
                if ($(this).val() == "") { }
                else { num--; }
                console.log(num);
            }
            else if ($(this).attr("name") == "tencentqq") {
                if ($(this).val() == "") { }
                else { num--; }
                console.log(num);
            }
            else if ($(this).attr("name") == "callothers") {
                if ($(this).val() == "") { }
                else { num--; }
                console.log(num);
            }
            else if ($(this).val() == "") {
                num++;
                console.log(num);
            }
        });
        if (num > 0) {
            return true;
        }
        else {
            return false;
        }
    }
    var CheckSubmitFlg = false;
    function CheckSubmit() {
        if (CheckSubmitFlg == true) {
            return true;
        }
        CheckSubmitFlg = true;
        return false;
    }
    function CheckSessionFlg() {
        book_p = $("#bookname").val();
        if (book_p == $.session.get('book_session')) {
            return true;
        }
        else {
            $.session.set('book_session', book_p);
            return false;
        }
    }
    $("document").ready(
        $("form").submit(function (e) {
            if (CheckNull()){
                e.preventDefault();
                $("#ErrorMessage").text("不能有空项！");
            }
//            if (CheckSubmit()) {
//                e.preventDefault();
//                $("#ErrorMessage").text("不要重复提交！");
//            }
            else if (CheckSessionFlg()) {
                e.preventDefault();
                $("#ErrorMessage").text("不要重复提交同一书目！");
            }
        })
    );
</script>

针对这个表单：

<form enctype="multipart/form-data" action="..." method="post">

        <table width="0" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>书名 </td>
                <td><input type="text" name="bookname" id="bookname" /></td>
            </tr>

            <tr>
                <td>上传书籍图片 </td>
                <td><input type="file" name="img"></td>
            </tr>

            <tr>
                <td>作者 </td>
                <td><input type="text" name="bookauthor" /></td>
            </tr>

            <tr>
                <td>出版社 </td>
                <td><input type="text" name="publish" /></td>
            </tr>

            <tr>
                <td>图书信息(简介) </td>
                <td><input type="text" name="bookbrief" /></td>
            </tr>

            <tr>
                <td>售价/原价 </td>
                <td><input type="text" name="booksell" />  <input type="text" name="bookprice" /></td>
            </tr>

            <tr>
                <td>微信(选填) </td>
                <td><input type="text" name="wechat" /></td>
            </tr>

            <tr>
                <td>qq(选填) </td>
                <td><input type="text" name="tencentqq" /></td>
            </tr>

            <tr>
                <td>其他联系方式(选填) </td>
                <td><input type="text" name="callothers" /></td>
            </tr>


            <tr>
                <td id="ErrorMessage"></td>
            </tr>


            <tr>
                <td colspan="2">
                    <input type="submit" value="上架" />
                    <input type="button" value="重置" />
                </td>
            </tr>

        </table>
    </form>