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

  1. <script src="../js/jquery-1.6.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3. $(function () {
  4. $("#btnAdd").click(function () { CheckForm() });
  5. $("#btnSave").click(function () { CheckForm() });
  6. });
  7.  
  8. function CheckForm() {
  9.  
  10. if ($("#ddlClassesType_2").val() == "--請選擇--") {
  11. alert("請選擇表單的類型");
  12. $("#ddlClassesType_2").focus();
  13. return false;
  14. }
  15.  
  16. if ($("#txtWebName").val() == "") {
  17. alert("請輸入網址的名稱");
  18. $("#txtWebName").focus();
  19. return false;
  20. }
  21.  
  22. if ($("#txtWebNameAlias").val() == "") {
  23. alert("請輸入網址的別稱");
  24. $("#txtWebNameAlias").focus();
  25. return false;
  26. }
  27.  
  28. if ($("#ddlVisitorType").val() == "-1") {
  29. alert("請選擇網址的訪問類型");
  30. $("#ddlVisitorType").focus();
  31. return false;
  32. }
  33.  
  34. if ($("#txtSortNo").val() == "") {
  35. alert("請輸入序號");
  36. $("#txtSortNo").focus();
  37. return false;
  38. }
  39.  
  40. if ($("#txtWebUrl").val() == "") {
  41. alert("請輸入網址");
  42. $("#txtWebUrl").focus();
  43. return false;
  44. }
  45.  
  46. if ($("#txtWebDesc").val() == "") {
  47. alert("網址備注信息也不能為空,請輸入。");
  48. $("#txtWebDesc").focus();
  49. return false;
  50. }
  51. return true;
  52. }
  53. </script>

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

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

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

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

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

用javascript调用表单验证事件时,为什么return false了还是把表单submit了?的更多相关文章

  1. jquery click事件中的return false

    提交表单数据时设定了type="submit"属性,单击提交按钮后会默认刷新页面 但是在使用jquery的click事件时没出现跳转 $('button').click(funct ...

  2. js为链接绑定点击事件并且附带return false;来阻止跳转

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title& ...

  3. JavaScript:综合案例-表单验证

    综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...

  4. 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  5. JavaScript自学笔记(1)---表单验证,let和const,JSON文件

    今天开个JS自学笔记,本身JS的语法很简单,如果学过Java或者C系的都很容易,就不讨论了.主要是讨论实际应用的问题. 1.表单验证: a.html自动验证: HTML 表单验证可以通过浏览器来自动完 ...

  6. jquery 表单验证插件

    其他: <form action=""> First name: <input type="text" name="FirstNam ...

  7. 原生js制作表单验证,基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

  8. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  9. Bootstrap表单验证插件bootstrapValidator使用方法整理

    插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...

随机推荐

  1. sc create SVN-Service binpath= "D:\Program Files\Svn\bin\s vnserve.exe --service -r E:\repository\svn" displayname= "SVN-Service" start= au to depend= Tcpip [SC] OpenSCManager 失败 5:

    在安装SVN服务时就会出现如下问题: C:\Users\gushangzao>sc create SVN-Service binpath= "D:\Program Files\Svn\ ...

  2. frameset 在 Google Chrome 中无法隐藏左边栏解决方法!

    使用Frameset 框架,发现在IE下, <frameset name="mainDefine" cols="200,10,*" frameborder ...

  3. ZJOI2012 网络——LCT相关题目

    有一个无向图G,每个点有个权值,每条边有一个颜色.这个无向图满足以下两个条件: 对于任意节点连出去的边中,相同颜色的边不超过两条. 图中不存在同色的环,同色的环指相同颜色的边构成的环. 在这个图上,你 ...

  4. Vue 框架-01- 入门篇 图文教程

    Vue 框架-01- 入门篇 图文教程 Vue 官网:https://cn.vuejs.org/ 关于 Vue 的基础大家可以在官网的[起步]去学习,本系列文章主要针对实例项目应用 一.Vue 的安装 ...

  5. VUE知识day3_vue插件总结

  6. Azure 虚拟机如何配置 AntiMalware

    本文仅演示通过 PowerShell 方式安装并配置 AntiMalware 的过程. 经典虚拟机          立即访问http://market.azure.cn 加载 Antimalware ...

  7. HBuilder设置APP状态栏

    一. 前言 状态栏就是手机屏幕最顶部的区域,包括了:信号.运营商.电量等信息.通常APP都有属于自己的色调风格,为了达到整体视觉美观,通常会设置状态栏和标题栏的色调设置成一致. 图例: 二.状态栏状态 ...

  8. Java学习---Excel读写操作

    1.1.1. 简介 Apache POI 使用Apache POI 完成Excel读写操作 Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API ...

  9. CSS学习---css基础知识0105

    CSS, Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 举例:颜色,大小,高度.宽度.内外边距.边框.浮动.定位.字 ...

  10. C++类知识总结

    c++类 1.初始化const或引用类型数据成员的唯一机会是在构造函数初始化列表中. 2.使用成员初始化列表时成员初始化的次序:第一个成员首先被初始化.然后是第二个,依次类推. 构造函数初始化列表为类 ...