JS调用表单验证,为什么return false表单依然submit?

简介:
+关注继续查看

表单提交前,都会有定义一个验证的方法以对用户提交的内容进行限定,今天写到了这个,但出现了一个好郁闷的东西,就是一点提交了,调用我自己写的一个CheckForm()方法时,我明明写了return false了,但它还是提交到服务器了,好不郁闷!然后仔细检查才发现,原来是漏了个return,下面先看出错的代码:

<script src="../js/jquery-1.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    $("#btnAdd").click(function () { CheckForm() });
    $("#btnSave").click(function () { CheckForm() });
});


function CheckForm() {

    if ($("#ddlClassesType_2").val() == "--請選擇--") {
        alert("請選擇表單的類型");
        $("#ddlClassesType_2").focus();
        return false;
    }

    if ($("#txtWebName").val() == "") {
        alert("請輸入網址的名稱");
        $("#txtWebName").focus();
        return false;
    }

    if ($("#txtWebNameAlias").val() == "") {
        alert("請輸入網址的別稱");
        $("#txtWebNameAlias").focus();
        return false;
    }

    if ($("#ddlVisitorType").val() == "-1") {
        alert("請選擇網址的訪問類型");
        $("#ddlVisitorType").focus();
        return false;
    }

    if ($("#txtSortNo").val() == "") {
        alert("請輸入序號");
        $("#txtSortNo").focus();
        return false;
    }

    if ($("#txtWebUrl").val() == "") {
        alert("請輸入網址");
        $("#txtWebUrl").focus();
        return false;
    }

    if ($("#txtWebDesc").val() == "") {
        alert("網址備注信息也不能為空,請輸入。");
        $("#txtWebDesc").focus();
        return false;
    }
    return true;
}
</script>

我回想了一下以前写过的javascript经验,也碰到过类似的问题,当时是用javascript直接用的,类似于下面这样子:

<asp:Button ID="btnSave" runat="server" Text="保存" Width="50px" OnClick="btnSave_Click" OnClientClick="return CheckForm();" />

看到CheckForm()前面的return 没有?其实jquery也是同理的,就是少了这个家伙,所以,只要把第4跟第5行改成下面这样子就OK了

$("#btnAdd").click(function () { return CheckForm() });
$("#btnSave").click(function () { return CheckForm() });

虽然简单,但不会的时候真的要想半天,这次把它记下来,以后也能回顾一下,希望能帮到有同样困惑的朋友。

目录
相关文章
|
25天前
|
JavaScript 数据格式
JS中操作表单元素与正则表达式校验表单
JS中操作表单元素与正则表达式校验表单
14 0
|
3月前
|
数据采集 JavaScript 数据安全/隐私保护
js提交form表单
前段时间将边用边学javascript.pdf书看完了,其中之前最不熟悉的也是这次印象最深刻的就是提交form表单,所以在这里总结一下js提交form表单,以及表单中对应的一些扩展知识O(∩_∩)O~
|
3月前
|
JavaScript 前端开发
javascript单击复制表单内容
javascript单击复制表单内容
26 0
|
3月前
|
JavaScript
js表单全选和取消全选
这是一个全选和取消全选的功能,最上边的是全选框,下边的是单选框。 1. 全选框选中,下边的所有单选框也都选中,全选框取消选中,下边的单选全不选中。如果全选选中情况下,下边的取消选中一个,哪上边的全选框就不选中。 2. 第二就是下边的单选框一个一个选中,等到下边的单选框全部选中后,上边的全选框选中。同样取消一个单选,全选就不选中。
|
6月前
|
JavaScript
js表单和submit 区别
js表单和submit 区别
40 0
|
8月前
|
JavaScript
js基础笔记学习233添加员工1获取表单的值
js基础笔记学习233添加员工1获取表单的值
26 0
js基础笔记学习233添加员工1获取表单的值
|
8月前
|
JavaScript
js基础笔记学习234添加员工2获取表单的值2
js基础笔记学习234添加员工2获取表单的值2
39 0
js基础笔记学习234添加员工2获取表单的值2
|
9月前
|
JavaScript
js for循环 递归 return 失败
js for循环 递归 return 失败
js for循环 递归 return 失败
|
JavaScript
js代码简化if判断,三元运算符与return
js代码简化if判断,三元运算符与return
205 0
js代码简化if判断,三元运算符与return
|
JavaScript 前端开发
JavaScript event.preventDefault和return false
JavaScript event.preventDefault和return false
87 0
相关产品
云迁移中心
推荐文章
更多