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

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

目录
相关文章
|
7月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
100 1
|
11月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
179 3
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
202 4
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
移动开发 前端开发 JavaScript
JavaScript 表单
JavaScript 表单
66 9
|
JavaScript 前端开发
JavaScript 表单验证
JavaScript 表单验证
55 9
|
移动开发 JavaScript 前端开发
js之操作表单 | 12-4
js之操作表单 | 12-4
|
JavaScript 前端开发
js登录注册简单tab切换页面(含前台表单验证)
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的登录注册页面,并实现Tab切换效果。包括了表单验证,点击登录或注册按钮时,可以切换显示相应的表单。同时提供了完整的前端代码和实现效果图。
|
人工智能 前端开发 JavaScript
react js 处理表单( form )的2个例子
react js 处理表单( form )的2个例子

热门文章

最新文章