<!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. 《编写可维护的JavaScript》之编程实践

    最近读完<编写可维护的JavaScript>,让我受益匪浅,它指明了编码过程中,需要注意的方方面面,在团队协作中特别有用,可维护性是一个非常大的话题,这本书是一个不错的起点. 本书虽短,却 ...

  2. dom处理配置文件_待完善

    import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java ...

  3. iOS下的实际网络连接状态检测(转)

    序言 网络连接状态检测对于我们的iOS app开发来说是一个非常通用的需求.为了更好的用户体验,我们会在无网络时展现本地或者缓存的内容,并对用户进行合适的提示.对绝大部分iOS开发者来说,从苹果示例代 ...

  4. Inno setup卸载前退出进程、删除文件夹

    [Code]function InitializeUninstall(): Boolean; var MainRun: HWND; var MVRun:HWND; begin// FindWindow ...

  5. 算法分析-快速排序QUICK-SORT

    设要排序的数组是A[0]……A[N-1],首先任意选取一个数据(通常选用数组的第一个数)作为关键数据,然后将所有比它小的数都放到它前面,所有比它大的数都放到它后面,这个过程称为一趟快速排序.值得注意的 ...

  6. RMSE、RMS、标准差

    1.均方根误差,它是观测值与真值偏差的平方和观测次数n比值的平方根,在实际测量中,观测次数n总是有限的,真值只能用最可信赖(最佳)值来代替.方根误差对一组测量中的特大或特小误差反映非常敏感,所以,均方 ...

  7. JVM内存分配和回收

    本文内容来自<Java编程思想(第四版)>第二章<一切都是对象>和第五章<初始化与清理>.作为一个使用了好几年的Javaer,再次看编程思想的前面章节(不要问我为什 ...

  8. ID卡常见型号

    EM ID卡,主要是采用瑞士EM或台湾GK公司的4100.4102系列IC芯片 + 线圈 + 卡基封装而成. (1)4001感应式ID厚卡:台湾4001 COB 特征:普通型感应卡,厚薄适中,带有ID ...

  9. httpClient download file(爬虫)

    package com.opensource.httpclient.bfs; import java.io.DataOutputStream; import java.io.File; import ...

  10. CSS制作出绚丽燃烧的火狐狸

    From here:http://www.webhek.com/firefox-animation/ ozilla在移动世界大会上宣布它的火狐操作系统(Firefox OS)的同时,也宣布了它的合作伙 ...