开发者社区> benjaminwhx> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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() });

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
常用javascript表单验证方法
//座机电话验证(支持分机) function chekeTel(tel) { var Tel = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/; if (Tel.
951 0
【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123753 ...
814 0
【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123779 ...
897 0
【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123799 ...
961 0
【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123810 ...
712 0
【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123820 ...
867 0
【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123835 ...
835 0
【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123854 ...
860 0
【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81087543 主要问题: 在刚开始创建了这个函数之后,使用的时候,总是会出现一个问题,就是按照正常步骤给一个ID选择器添加子节点的时候正常,但是到了给一个class选择器的元素添加的时候始终只能添加一个。
922 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS 语言在引擎级别的执行过程
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
Python第五讲——关于爬虫如何做js逆向的思路
立即下载