执行函数时，raturn false可阻止标签（例如超链接）的事件发生，从而达到提交表单的效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .error{

            color: red;

        }

    </style>

</head>

<body>

    <form id="f1" action="s5.html" method="POST">

        <div><input name="n1" tex = "用户名" type="text" /></div>

        <div><input name="n2" tex = "密码" type="password" /></div>

        <div><input name="n3" tex = "邮箱" type="text" /></div>

        <div><input name="n4" tex = "端口" type="text" /></div>

        <div><input name="n5" tex = "IP" type="text" /></div>

        <input type="submit" value="提交" />

        <img src="...">

    </form>

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

    <script>

        $(function(){    // **当页面框架加载完毕后，自动执行**

            // 当页面所有元素完全加载完毕后，执行

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

                $('.error').remove();

                var flag = true;

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

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

                    var n = $(this).attr('tex');

                    if(v.length <= 0){

                        flag = false;

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

                        tag.className = "error";

                        tag.innerHTML = n + "必填";

                        $(this).after(tag);

                        // return false;

                    }

                });

                return flag;

            });

        });

    </script>

</body>

</html>

jQuery练习 | 提交表单验证的更多相关文章

  1. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  2. JQuery ajax提交表单及表单验证

    JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目   注:经过验证,formValidator只适合一个 ...

  3. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  4. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  5. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  6. jquery php ajax 表单验证

    本实例用到 JQuery 类库本身的函数和功能,所有表单信息利用 PHPMailer 类库邮件的形式发送.   .创建一个表单 html 页面   表单部分 html 代码   以下为引用内容: &l ...

  7. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  8. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  9. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. 通过面试题学习零散知识：Java面试题整理

     一.如何看待面试题 对于喜欢学习的开发者来说,我们抛开工作和生活的时间,剩余的时间并不多,如果都用于学习的话,也不可能学的下所有感兴趣的技术点,精力也跟不上,我是深感如是.而面试题一般都是零碎的知识 ...

  2. 编写高质量代码改善C#程序的157个建议——建议97：优先考虑将基类型或接口作为参数传递

    建议97:优先考虑将基类型或接口作为参数传递 除了公开及类型或接口外,方法的参数也应该考虑基类型或接口. 以Enumerable类型为例,它的成员方法中只要涉及需要操作集合对象的地方,都要使用IEnu ...

  3. crontab基本操作部分

    一.cron服务 cron是一个linux下 的定时执行工具,可以在无需人工干预的情况下运行作业. service crond start    //启动服务 service crond stop  ...

  4. HashSet小试牛刀

    HashSet详细介绍 import java.util.HashSet; import java.util.Iterator; public class Main { public static v ...

  5. Python 数据分析—第七章 数据归整：清理、转换、合并、重塑

    一.数据库风格的Dataframe合并 import pandas as pd import numpy as np df1 = pd.DataFrame({'1key':['b','b','a',' ...

  6. Backup--压缩备份和TDE

    1>对启用TDE的数据库,压缩备份的备份文件大小与未压缩备份的备份文件大小差不多(压缩比为 1 ) 2>对启用TDE的数据库,压缩备份的备份时间远高于未压缩备份 2>对启用TDE的数 ...

  7. thinkphp里数据嵌套循环

    做thinkphp时要用到循环里面嵌套循环的,并第二个循环是和外面的有关联的. thinkphp官网给出的文档为: <volist name="list" id=" ...

  8. .Net Core配置与自动更新

    .Net Core 将之前Web.Config中的配置迁移到了appsettings.json文件中,并使用ConfigurationBuilder来读取这个配置文件.并可设置在配置文件变化以后,自动 ...

  9. centos6.5安装配置网络

    很多时候,Centos系统都是使用命令来管理的,如果当时安装系统时没有设置IP地址的话,那就只能在命令行设置了.当然对于高手来说,easy!但对于小白来说,头都大了,呵呵!下面简单说下我的操作吧 首先 ...

  10. Django Managers管理器

    Managers class Manager 管理器是向Django模型提供数据库查询操作的接口.Django应用程序中每个模型至少有一个管理器. Manager names 默认情况下管理器的名字为 ...