执行函数时，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. static 和final

    1.static       static关键字可以用来修饰类的变量,方法和内部类.static是静态的意思,也是全局的意思,它定义的东西属于全局,与类相关,不与具体实例相关.就是说它调用的时候,只是 ...

  2. 【转载】SQL注入攻防入门详解

    滴答…滴答…的雨,欢迎大家光临我的博客. 学习是快乐的,教育是枯燥的. 博客园  首页  博问  闪存    联系  订阅 管理 随笔-58 评论-2028 文章-5  trackbacks-0 站长 ...

  3. Actor模型文章收集

    参与者模式——维基百科 Akka.Net——github开源项目 Actor原理——比较深入的文章

  4. [Lua快速了解一下]Lua的函数

    -recurrsive function fib(n) end ) + fib(n - ) end -closure 示例一 function newCounter() return function ...

  5. Android R文件的id

    如果你用 apktoool 反编译过 apk 就知道,反编译后res/values 下有一个 public.xml 文件,内容如图     这个东西有什么用呢?   先从如何使用资源 ID 开始,在开 ...

  6. LVM与RAID阵列

    创建LVM分区: 相关命令: pvcreat /dev/sdb{1,2,3} 创建物理卷 vgcreat test_vg1 /dev/sdb1 创建卷组     vgcreat test_vg2 -s ...

  7. VC++下的Unicode编程

    ASCII是用来表示英文字符的一种编码规范.每个ASCII字符占用1个字节,因此,ASCII编码可以表示的最大字符数是255(00H—FFH). 其实,英文字符并没有那么多,一般只用前128个(00H ...

  8. php 将二维数组批量插入到数据库中

    $arr = array( array(,'name'=>'ceshi4'), array(,'name'=>'ceshi5'), array(,'name'=>'ceshi6'), ...

  9. Reporting Service服务SharePoint集成模式安装配置（7、配置SharePoint2010产品）

    在第3步安装完成SharePoint2010产品后,没有选择[立即安装产品配置向导],这一小节将单独配置SharePoint2010产品数据库(管理中心). 1)启动SharePoint 2010 产 ...

  10. 直接导入用户信息到discuz ucenter.

    上一篇帖子: 直接导入帖子到Discuz 论坛数据库. 结束时说要写一篇导入用户的帖子, 一直没时间, 但是咱不能做太监,不是? 所以今天赶快补上. 在做discuz整合或者迁移是, 很多人可能遇到相 ...