执行函数时，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. 金士顿DT100 G3 PS2251-07海力士U盘量产修复成功教程

    金士顿DT100 G3这款U盘.用了大概一年半没什么问题,前段时间拷贝大文件,无奈电脑突然断电,然后这个U盘在电脑上就读不出来了,只能显示盘符,所以有了修复过程.   最开始我也是菜鸟,不知道怎么搞, ...

  2. android session解析

    最近在开发项目的过程中,遇到Android与web服务器要在同一session下通信的问题. 在解决问题前先回顾下Session与Cookie: Cookie和Session都为了用来保存状态信息,都 ...

  3. How do I avoid capturing self in blocks when implementing an API?

    Short answer Instead of accessing self directly, you should access it indirectly, from a reference t ...

  4. opencv常用函数备忘

    //显示图片 IplImage * src = cvLoadImage("xx.JPG"); cvNamedWindow(); cvShowImage("show_ima ...

  5. 机器学习及其matlab实现—从基础到实践

    第1周 MATLAB入门基础 第2周 MATLAB进阶与提高 第3周 BP神经网络 第4周 RBF.GRNN和PNN神经网络 第5周 竞争神经网络与SOM神经网络 第6周 支持向量机(Support ...

  6. 【Android学习】Service&Boradcast初步

    Service初步 掌握Service概念 掌握Service分类 Service开发能力具备 了解Service和intentService类的区别 重点难点 StartService和BoundS ...

  7. select、poll、epoll的比较

    linux提供了select.poll.epoll接口来实现IO复用,三者的原型如下所示,本文从参数.实现.性能等方面对三者进行对比. int select(int nfds, fd_set *rea ...

  8. C# 过滤SQL 字符串中的 参数

    /// <summary> /// 参数过滤 /// </summary> /// <param name="parameters"></ ...

  9. Adding Cache-Control headers to Static Files in ASP.NET Core

    Thanks to the ASP.NET Core middleware pipeline, it is relatively simple to add additional HTTP heade ...

  10. vcenter安装错误The DSN is pointing to anunspported ODBC driver...

    在安装vcenter server中采用现有独立sql server数据库时出现下列错误. 这是由于当前独立数据库版本和当前系统的客户端驱动不匹配.导致我们在odbc中配置dsn无法正常运行. 如sq ...