<!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. golang基础数据结构

    一.概述: 这里主要讨论四种类型---数组.slice.map和结构体 数组和结构体是聚合类型:它们的值都是由很多个元素或者成员字段的值组成.数组是有同构元素组成--每个数组的元素的类型相同:结构体为 ...

  2. 一致性hash

    1,一致性hash函数选择 crc32(范围为0到2的32次方),超过最大值,需要求模 :md5,求得16进制数据,超过最大值,需要求模 : 2,对cache server的虚拟节点的某些唯一属性或者 ...

  3. MatLab实现FFT与功率谱

    FFT和功率谱估计 用Fourier变换求取信号的功率谱---周期图法 clf; Fs=1000; N=256;Nfft=256;%数据的长度和FFT所用的数据长度 n=0:N-1;t=n/Fs;%采 ...

  4. 《think in python》学习-8

    字符串 字符串是一个序列,可以用方括号操作符来访问字符串中的单独字符 fruit = 'banana' letter = fruit[1] 方括号中的表达式称为下标 下标从0 开始 任何表达式,包括变 ...

  5. Android EditText小结

    防止EditText获取焦点弹出输入法 android:focusable="true" android:focusableInTouchMode="true" ...

  6. Android设置输入框和软键盘动态悬浮

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  7. C语言_double_精度的谜团

    double-long long 和0的比较,double和double之间比较

  8. sublime text帮你更好的写python

    在Google的Python风格指南中,有这样的要求: 用4个空格来缩进代码 但是每次在敲代码的时候,用一个tab确实比敲四次空格方便的多.令人欣慰的是sublime text 2能够把tab转换成4 ...

  9. C语言函数qsort的使用方法

    qsort函数stdlib.h文件中,函数原型为 void qsort(void *base,size_t nelem,size_t width,int (*Comp)(const void *,co ...

  10. Activitys, Threads, & Memory Leaks

    Activitys, Threads, & Memory Leaks 在Android编程中,一个公认的难题是在Activity的生命周期如何协调长期运行的任务和避免有可能出现的内存泄漏问题. ...