如form表单的submit,a标签都自带一个鼠标单击事件，其实我们还可以额外填加单击事件

如：$(':submit').click();   则自定义的单击事件先执行，然后才是标签自带的单击事件(checkbox相反，是默认事件先执行)，

如果在自定义事件函数中有return false则标签自带的事件不生效，有return true则生效

这常用来做表单验证，因为填写项不完整或错误是不允许提交的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form id="f1" action="s8.html" method="get">

    <label>用户名:</label><input name="n1" type="text"/><br>

    <label>昵 称:</label><input name="n2" type="text"/><br>

    <label>密 码:</label><input name="n3" type="password"/><br>

    <label>生 日:</label><input name="n4" type="text"/><br>

    <label>星 座:</label><input name="n5" type="text"/><br>

    <input type="submit"/>

</form>

<script src="jquery-3.3.1.js"></script>

<script>

    $(':submit').click(function () {

        var flag = true;

        $('#f1').find('span').remove();

        $('#f1').find('input[type="text"],input[type="password"]').each(function () {

            var v = $(this).val();

            if(v.length<=0){

                flag = false;

                var tag = document.createElement('span');

                $(tag).text("必填");

                $(tag).css('color','red');

                $(this).after(tag);

                return false;   //此处的return,是返回整个each的所有函数，直接跳到return flag;这样就是遇到n1为空时后面就不检查了，非空继续

            }

        });

        return flag;

    });

</script>

</body>

</html>

　　

jQuery同一标签多个相同事件 return语句 表单提交实例的更多相关文章

  1. jquery判断邮箱及密码是否输入正确的表单提交

    jquery我接触的也不是很多,基本就是照着案例然后查相关方法做出来的,基本用了大概半天的时间,手打加查资料实现.具体如下,首先下载一个jquery包,网址是https://jquery.com/do ...

  2. jquery插件-表单提交插件-jQuery.Form

    1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...

  3. 浏览器下载/导出文件 及jQuery表单提交

    1 比如以下按钮, 用于导出文件,如EXCEL文件. <li> <button class="whiteBg btn2" onclick="doExp( ...

  4. Easyui + jQuery表单提交 给 Controller patr1

    2014-11-15  总结上周在公司开发所用到的技术,由于是刚找的工作(一个大三实习生)+自己的技术菜,有很多地方都是怎么想就怎么实现的, 如果你有什么更好的解决方法,在看见这篇博客的时候,希望你能 ...

  5. jQuery判断 form表单提交时一些文本框的判断

    一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...

  6. jQuery补充之jQuery扩展/form表单提交/滚动菜单

    jQuery扩展 为了避免重复造轮子,能高效使用别人的代码,所以有了扩展. jQuery扩展有两种方式: 自执行函数方式 定义函数,并执行函数. 自执行函数: (function(jq){ jq.ex ...

  7. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  8. jquery表单提交获取数据(带toast dialog)

    最近写了一个召集令,传统表单提交注册.写写遇到的费时间的点与解决办法 git项目地址:form-demo(针对于手机版,懒人可以直接使用,有排版和样式) demo使用Jquery,toast使用jqu ...

  9. jquery.form.js 让表单提交更优雅

    jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...

随机推荐

  1. L1-028. 判断素数

    本题的目标很简单,就是判断一个给定的正整数是否素数. 输入格式: 输入在第一行给出一个正整数N(<=10),随后N行,每行给出一个小于231的需要判断的正整数. 输出格式: 对每个需要判断的正整 ...

  2. MySQL 显示表字段及注释等信息

    SHOW TABLES  from resource [FROM db_name] //列出数据库数据表 SHOW TABLE STATUS from resource [FROM db_name]  ...

  3. pandas的聚合操作: groupyby与agg

    pandas提供基于行和列的聚合操作,groupby可理解为是基于行的,agg则是基于列的 从实现上看,groupby返回的是一个DataFrameGroupBy结构,这个结构必须调用聚合函数(如su ...

  4. Project篇：项目1

    项目: 步骤: (1)布置项目 (2)独立完成项目设计 (3)项目框架讲解 (4)独立完成项目功能编写 (5)项目讲解 项目内容介绍: 项目开发流程: 需求分析------>概要设计------ ...

  5. 九度OJ1122题-吃巧克力

    题目1122:吃糖果 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2453 解决:1957 题目描述: 名名的妈妈从外地出差回来,带了一盒好吃又精美的巧克力给名名(盒内共有 N 块巧克力 ...

  6. CodeForces - 1099F：Cookies （线段树）

    Mitya and Vasya are playing an interesting game. They have a rooted tree with n vertices, and the ve ...

  7. vmware如何安装ubuntu

    一.安装vamware 二.新建虚拟机 三.安装虚拟机的镜像文件 三.正式安装ubuntu 可能会出现的问题有: 下面为百度上的方法: 敲重点: 倘若按照网上的方法:关机重启按F2无法进入BIOS.则 ...

  8. lecture4特征提取-七月在线-cv

    霍夫变换 http://blog.csdn.net/sudohello/article/details/51335237 http://blog.csdn.net/glouds/article/det ...

  9. python day 09 文件操作

    一 初识文件操作 使⽤用python来读写⽂文件是非常简单的操作. 我们使⽤用open()函数来打开⼀一个⽂文件, 获取到⽂文件句句柄. 然后通过⽂文件句句柄就可以进⾏行行各种各样的操作了了. 根据打 ...

  10. WordPress博客插入直播源

    方法很简单: 找到直播源地址,撰写新文章(可视化切换到文本模式下)插入直播源地址 代码:<iframe id="tv_iframe" width="880" ...