<!DOCTYPE html>

<html>

    <head>

        <title>表单验证</title>

        <script src="../scripts/jquery-1.9.1.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(function(){

                $("form :input.required").each(function(){

                        var $required = $("<strong class='high'>*</strong>");

                        $(this).parent().append($required);

                    });

                    $("input").blur(function(){

                        var $parent = $(this).parent();

                        if($(this).is("#username")){

                            $parent.find(".formtips").remove();

                            if( this.value==""||this.value.length<6){

                                var errorMsg = "请输入至少6位的用户名.";

                                $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
　　　　　　　　　　　　　　　　　　　　//$(this).after(errorMsg);

                            }else{

                                var okMsg = "输入正确.";

                                $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');

                            }

                        }

                    });

                    $("#send").click(function(){

                        $("form .required:input").trigger("blur");

                        var numError = $('form .onError').length;

                        if(numError){ //任何非0的数像1 -1等都被认为是真

                            return false;

                        }

                        alert(numError);

                    })

                });

        </script>

    </head>

    <body>

      <form method="post" action="">

        <div class="int">

            <label for="username">用户名：&nbsp;&nbsp;&nbsp;&nbsp;</label>

            <input type="text" id="username" class="required" />

        </div>

        <div class="int">

            <label for="email">邮箱：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>

            <input type="text" id="email" class="required" />

        </div>

        <div class="int">

            <label for="persioninfo">个人资料：</label>

            <input type="text" id="persioninfo" class="required" />

        </div>

        <div class="sub">

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

            <input type="reset" id="res"/>

        </div>

      </form>

    </body>

</html>

jQuery简单前端表单验证的更多相关文章

  1. 用jQuery写的最简单的表单验证

    近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...

  2. 基于jQuery的Validate表单验证

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

  3. 基于Jquery Validate 的表单验证

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

  4. angularjs学习第四天笔记（第一篇：简单的表单验证）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  5. jquery.validation.js 表单验证

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

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

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

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

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

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

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

  9. Struts2之Action三种接收参数形式与简单的表单验证

    有了前几篇的基础,相信大家对于Struts2已经有了一个很不错的认识,本篇我将为大家介绍一些关于Action接收参数的三种形式,以及简单的表单验证实现,下面进入正题,首先我们一起先来了解一下最基本的A ...

随机推荐

  1. 2014.12.13 ASP.NET文件上传

    一.文件上传:(一)上传到硬盘文件夹1.最简单的上传. [HTML代码] <asp:FileUpload ID="FileUpload1" runat="serve ...

  2. Oracle存储过程的一点使用总结

    [博客文章背景]博客开通已经1.2年了,一直碍于技术能力,不敢献丑.想起1年前在一个数据处理相关项目结束后,代金排主管让我做一个数据库开发总结文档和一个Toad.PL/SQL Developer工具的 ...

  3. pythonj基础之 多线程

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...

  4. 如何对MySQL 对于大表（千万级）进行优化

    如何对Mysql中的大型表进行优化 @(mysql 笔记) 收集信息 1.数据的容量:1-3年内会大概多少条数据,每条数据大概多少字节: 2.数据项:是否有大字段,那些字段的值是否经常被更新: 3.数 ...

  5. java中数组与List相互转换的方法

    1.List转换成为数组.(这里的List是实体是ArrayList) 调用ArrayList的toArray方法. toArray public <T> T[] toArray(T[] ...

  6. jQuery无缝滚动向上

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. DOM的认识以及一些节点的应用

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过 ...

  8. SQL Server2012 创建定时作业——图文并茂，教你轻松快速创建

    SQL Server2012 如何创建定时作业?有兴趣的可以来看下,图文并茂哦! 1.首先我们打开SQL Server代理,里面选择作业 2.右键作业,选择新建作业 3.填写一些相应的内容,名称和说明 ...

  9. 在MySQL数据库建立多对多的数据表关系

    在数据库中,如果两个表的之间的关系为,多对多的关系,如:“学生表和课程表”,一个学生的可以选多门课,一门课也可以被多门学习选;根据数据库的设计原则,应当形成第三张关联表 步骤1:创建三张数据表Stud ...

  10. 安装 Archlinux 小记

    故事的背景 开始的时候装的 win8 + ubuntu 双系统,但是慢慢感觉只要有 windows 存在,在 Linux 上遇到问题了就想逃回去. 在一次 GDG 的演讲中听到的: 趁现在还年轻,还有 ...