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

来源：互联网发布：闭关锁国知乎编辑：程序博客网时间：2024/05/21 10:18

表单验空，并阻止提交。使用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>

0 0