用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 ...
随机推荐
- javaweb浏览器url上项目名称的更改
如何改变上面url项目名称地址,如把04去掉改成teachershare 如下图:在项目设置中设置web context-root属性,将04去掉. 就可以用这个登录了. 要注意的是如果之前已经部署在 ...
- POJ 2184(01背包)(负体积)
http://poj.org/problem?id=2184 http://blog.csdn.net/liuqiyao_01/article/details/8753686 对于负体积问题,可以先定 ...
- Excel2010条件格式的位置
以下是excel2010的条件格式设置方法(英文版) 具体使用方法可以参考 http://office.microsoft.com/zh-cn/excel-help/HA102809768.aspx
- Hibernate 注解(Annotations 四)多对多双向注解
注解(Annotation),也叫元数据.一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性,与类.接口.枚举是在同一个层次.它可以声明在包.类.字段.方法.局部变量.方法参数等的前面,用来 ...
- 虚树(Bzoj3611: [Heoi2014]大工程)
题面 传送门 虚树 把跟询问有关的点拿出来建树,为了方便树\(DP\) 在\(LCA\)处要合并答案,那么把这些点的\(LCA\)也拿出来 做法:把点按\(dfs\)序排列,然后求出相邻两个点的\(L ...
- drupal 通过hook_menu实现添加菜单
$items['mypayment/onlinepay']=array( 'title' => '在线充值', 'description' => '在线充值', 'page callbac ...
- Spring Data MongoDB 环境搭建
一.开发环境 spring版本:4.0.6.RELEASE spring-data-mongodb版本:1.4.1.RELEASE junit版本 4.11 maven版本:3.0.5 二.pom.x ...
- Java快速入门-02-基础篇
Java快速入门-02-基础篇 上一篇应该已经让0基础的人对 Java 有了一些了解,接一篇更进一步 使用 Eclipse 快捷键 这个老师一般都经常提,但是自己不容易记住,慢慢熟练 快捷键 快捷键作 ...
- Azure Linux 虚机上配置 RAID 的常见问题及解决方案
简介 独立硬盘冗余阵列(RAID, Redundant Array of Independent Disks),简称磁盘阵列.能增强数据集成度,增强容错功能,增加处理量或容量.详情参见这篇文章. 配置 ...
- python基础——Linux系统下的文件目录结构
单用户操作系统和多用户操作系统 单用户操作系统:指一台计算机在同一时间只能由一个用户使用,一个用户独自享用系统的全部硬件和软件资源. 多用户操作系统:指一台计算机在同一时间可以由多个用户使用,多个用户 ...