<!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. 【线段树求最靠前】【HDU2795】【Billboard】

    题意: 有一个H*W的广告牌,当插入一个广告时(1*Wi),问最靠前的插入方式是什么 新生赛有个类似的题目,可惜当时居然没水过去. 果断用线段树做 以H为线段 建树,存[l,r]中最大的宽度,因为区间 ...

  2. 【类克鲁斯卡尔做法+枚举最小边】【HDU1598】【find the most comfortable road】

    题意:  给你一个图,有边权,K个询问:u到v 的路径中   边权最大值-边权最小值的最小值是多少 http://acm.hdu.edu.cn/showproblem.php?pid=1598 题解( ...

  3. Android学习之菜单

    android中包含多种菜单,本例带来的是选项菜单和上下文菜单. 1.选项菜单 在android中,开发者可以在xml文档中部署所要添加的菜单,在后台调用即可. <menu xmlns:andr ...

  4. linux下Java环境的配置

    linux下Java环境的配置 现在用linux的朋友越来越多了,前几天就有两个朋友问我linux下怎么配置java环境,我想还有很多朋友想了解学习这方面的东西,就写一个完全一点的linux java ...

  5. 蜗牛爱课－ CGAffineTransformMakeRotation 实现一张图片的自动旋转

    self.locationTimer =[NSTimer scheduledTimerWithTimeInterval: 0.01 target: self selector:@selector(tr ...

  6. Android 监听网络变化

    Android 监听网络变化

  7. PS切图保存后的背景图为透明

    1.若想PS切图保存后的背景图为透明,那么则需要在如下图中所示的修改即可,切图后[文件]——>[存储为web格式]——>[PNG-24]: 2.要想在css中的背景图片为相通,则先剪切一个 ...

  8. PHP学习笔记-数组(1)

    1-1 数组定义 1.什么是数组? 所谓数组,就是相同数据类型的元素按一定顺序排列的集合,就是把有限个类型相同的变量用一个名字命名,然后用编号区分他们的变量的集合,这个名字称为数组名,编号称为下标.组 ...

  9. html5 OPOA

    1.0 one page one application     一个应用只有一个页面,对用户的表现来说的. 2.0 起源于web的MIS系统     MIS(管理信息系统) 3.0 银行客户端 4. ...

  10. MYSQL 数学运算符问题

    背景: 在mysql中   ’stringA' + 'stringB' 这种类型的操作,在mysql内部会自动转化为两个double 数进行运算. -------------------------- ...