用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 ...
随机推荐
- mysql数据同步
随着各行业信息化水平的不断提升,各种各样的信息管理系统都被广泛使用,各系统间数据完全独立,形成了大量的信息孤岛.出于管理及决策方面的需求,实现各平台的数据同步是一个很迫切的需求,TreeSoft数据库 ...
- 在Pandas中直接加载MongoDB的数据
在使用Pandas进行数据处理的时候,我们通常从CSV或EXCEL中导入数据,但有的时候数据都存在数据库内,我们并没有现成的数据文件,这时候可以通过Pymongo这个库,从mongoDB中读取数据,然 ...
- 在 :after/ :before 使用 font awesome web Icon
.element { position: relative; } /*replace the content value with the corresponding value from the l ...
- OI中的一些模板
线性筛 #include"cstdio" #include"cstring" #include"iostream" #include&quo ...
- BZOJ4650: [Noi2016]优秀的拆分(hash 调和级数)
题意 题目链接 Sol NOI的题都这么良心么.. 先交个\(n^4\)暴力 => 75 hash优化一下 => 90 然后\(90\)到\(100\)分之间至少差了\(10\)难度台阶= ...
- Linux(Ubuntu)下MySQL的安装
1)首先检查系统中是否已经安装了MySQL 在终端里面输入 sudo netstat -tap | grep mysql 若没有反映,没有显示已安装结果,则没有安装.若如下显示,则表示已经安装 2)如 ...
- 关于Bootstrap的悬浮窗口(popover)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- sql-pivot
PIVOT PIVOT运算符用于在列和行之间进行数据旋转或透视转换,同时执行聚合运算 ,,) Order By empid asc Select * From ( Select empid,YEAR( ...
- Angular入门教程一
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- logback配置文件---logback.xml详解
一.参考文档 1.官方文档 http://logback.qos.ch/documentation.html 2.博客文档 http://www.cnblogs.com/warking/p/57103 ...