用javascript调用表单验证事件时,为什么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调用表单验证事件时,为什么return false了还是把表单submit了?的更多相关文章
- jquery click事件中的return false
提交表单数据时设定了type="submit"属性,单击提交按钮后会默认刷新页面 但是在使用jquery的click事件时没出现跳转 $('button').click(funct ...
- js为链接绑定点击事件并且附带return false;来阻止跳转
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title& ...
- JavaScript:综合案例-表单验证
综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
- 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- JavaScript自学笔记(1)---表单验证,let和const,JSON文件
今天开个JS自学笔记,本身JS的语法很简单,如果学过Java或者C系的都很容易,就不讨论了.主要是讨论实际应用的问题. 1.表单验证: a.html自动验证: HTML 表单验证可以通过浏览器来自动完 ...
- jquery 表单验证插件
其他: <form action=""> First name: <input type="text" name="FirstNam ...
- 原生js制作表单验证,基本的表单验证方法
表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
随机推荐
- 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\ ...
- frameset 在 Google Chrome 中无法隐藏左边栏解决方法!
使用Frameset 框架,发现在IE下, <frameset name="mainDefine" cols="200,10,*" frameborder ...
- ZJOI2012 网络——LCT相关题目
有一个无向图G,每个点有个权值,每条边有一个颜色.这个无向图满足以下两个条件: 对于任意节点连出去的边中,相同颜色的边不超过两条. 图中不存在同色的环,同色的环指相同颜色的边构成的环. 在这个图上,你 ...
- Vue 框架-01- 入门篇 图文教程
Vue 框架-01- 入门篇 图文教程 Vue 官网:https://cn.vuejs.org/ 关于 Vue 的基础大家可以在官网的[起步]去学习,本系列文章主要针对实例项目应用 一.Vue 的安装 ...
- VUE知识day3_vue插件总结
- Azure 虚拟机如何配置 AntiMalware
本文仅演示通过 PowerShell 方式安装并配置 AntiMalware 的过程. 经典虚拟机 立即访问http://market.azure.cn 加载 Antimalware ...
- HBuilder设置APP状态栏
一. 前言 状态栏就是手机屏幕最顶部的区域,包括了:信号.运营商.电量等信息.通常APP都有属于自己的色调风格,为了达到整体视觉美观,通常会设置状态栏和标题栏的色调设置成一致. 图例: 二.状态栏状态 ...
- Java学习---Excel读写操作
1.1.1. 简介 Apache POI 使用Apache POI 完成Excel读写操作 Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API ...
- CSS学习---css基础知识0105
CSS, Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 举例:颜色,大小,高度.宽度.内外边距.边框.浮动.定位.字 ...
- C++类知识总结
c++类 1.初始化const或引用类型数据成员的唯一机会是在构造函数初始化列表中. 2.使用成员初始化列表时成员初始化的次序:第一个成员首先被初始化.然后是第二个,依次类推. 构造函数初始化列表为类 ...