用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 ...
随机推荐
- The configuration section 'system.serviceModel' cannot be read because it is missing a section decla
将Asp.Net 2.0的Web Site搭建在IIS7(7.5)上时,运行出现500.19错误, 错误提示为 The configuration section 'system.serviceMod ...
- 不得不知的npm常用指令
前端进阶肯定会遇到npm(包管理工具)的使用,下面是我总结的一些比较实用的npm指令: npm install <name>安装nodejs的依赖包 例如npm install expre ...
- JavaScript初学
今天学习了js的基础知识,自我归纳如下: 第一部分:js变量的声明和引入 js声明1-直接声明js代码块,使用<script></script> 2-引入外部声明,即创建一个 ...
- html5 区块与内联div 与span html块级元素
HTML <div> 和 <span> HTML 列表 HTML 类 可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块 ...
- Java web中的web-xml中标签定义之jsp-config
<jsp-config> 包括<taglib> 和<jsp-property-group> 两个子元素. 其中<taglib>元素在JSP 1.2时就已 ...
- 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)
问题描述: 有时候使用 apt-get 终端提示这样的错误信息: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/var/lib/ ...
- unity震动效果
using System.Collections; using System.Collections.Generic; using UnityEngine; //思想:在短时间内在规定圆内随机震动对象 ...
- 软工读书笔记 week 5 ——《构建之法》
本周主要对<构建之法>中的一部分进行阅读. 一.软件与软件工程究竟是什么? 本书的概论部分就指出“软件 = 程序 + 软件工程”.而我们这门课的名字就叫“现代软件工程”.其实在上课之前,我 ...
- 如何在 Azure 中的经典 Windows 虚拟机上设置终结点
在 Azure 中使用经典部署模型创建的所有 Windows 虚拟机都可以通过专用网络通道与同一云服务或虚拟网络中的其他虚拟机自动通信. 但是,Internet 或其他虚拟网络中的计算机需要终结点将入 ...
- Nginx学习---企业级nginx环境搭建
1.1. nginx安装环境 1.系统要求 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. 1-1 安装 GCC 源码安装nginx需要依赖gcc环境,需要 ...