目标：使用jQuery进行表单验证。

功能：1.必填选项后面添加了红色小星星；

　　　2.选中开始输入时，输入文本框会改变当前背景色，增强用户体验；

　　　3.输入的时候就开始验证，当输入格式正确就会提醒，就是当前还停留在输入框，或者点击提交按钮；

　　　4.设置重置按钮，点击重置，会清除文本框里面的所有内容。

截图：

HTML代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta charset=utf-8" />

 <title></title>

 </head>

 <body>

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

     <div class="int">

         <label for="username">用户名:</label>

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

     </div>

     <div class="int">

         <label for="email">邮箱:</label>

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

     </div>

     <div class="int">

         <label for="personinfo">个人资料:</label>

         <input type="text" id="personinfo" />

     </div>

     <div class="sub">

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

     </div>

 </form>

 </body>

 </html>

CSS代码：

 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}

 form div { margin:5px 0;}

 .int label { float:left; width:100px; text-align:right;}

 .int input { padding:1px 1px; border:1px solid #ccc;height:16px;}

 .sub { padding-left:100px;}

 .sub input { margin-right:10px; }

 .formtips{width: 200px;margin:2px;padding:2px;}

 .onError{

     background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;

     padding-left:25px;

 }

 .onSuccess{

     background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;

     padding-left:25px;

 }

 .high{

     color:red;

 }

 .focus {

      border: 1px solid #f00;

      background: #fcc;

 }

Jquery代码：

 <script type="text/javascript">

 $(function(){

     //2.如果是必填的，则加红星标识.

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

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

         $(this).parent().append($required); //然后将它追加到文档中

     });

          //3.文本框失去焦点后开始验证

         $('form :input').blur(function(){

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

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

          //3.1验证用户名

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

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

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

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

                 }else{

                 var okMsg = '输入正确.';

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

                 }

          }

          //3.2验证邮件

          if( $(this).is('#email') ){

             if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){

                   var errorMsg = '请输入正确的E-Mail地址.';

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

             }else{

                   var okMsg = '输入正确.';

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

             }

          }

          //3.3实现一边输入一边验证

     }).keyup(function(){

         $(this).triggerHandler("blur");

     }).focus(function(){

           $(this).triggerHandler("blur");

         });//end blur

         //3.4提交，最终验证。

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

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

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

             if(numError){

                 return false;

             }

             alert("注册成功,密码已发到你的邮箱,请查收.");

         });

         //4.重置

          $('#res').click(function(){

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

          });

          //1.选中输入的时候输入框变色

         $(":input").focus(function(){

             $(this).addClass("focus");

         }).blur(function(){

             $(this).removeClass("focus");

         });

 })

 </script>

此案例是基于jQuery1.7，所以需要额外引入jQuery.

jQuery表单验证案例的更多相关文章

  1. 使用jquery插件validate制作的表单验证案例

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

  2. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  3. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  4. python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

  5. jquery表单验证使用插件formValidator

    JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...

  6. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  7. jQuery表单验证以及将表单序列化为json对象小练习

    jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...

  8. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...

  9. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

随机推荐

  1. Java--JDK动态代理核心源码解析

    1.首先我们了解一下JDK动态代理的使用方法: public static void main(String[] args) { /** * 创建一个Bean对象,该对象实现BeanInterFace ...

  2. android开发Preference的使用

    1  .Preference是androidSDK提供的一个基类从API1就开始有了,用于显示界面给用户. 2  .在使用Preference显示activity时,此activity需要继承Pref ...

  3. 【转】PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数

    原文地址: PHP 杂谈<重构-改善既有代码的设计>之一 重新组织你的函数 思维导图   点击下图,可以看大图.    介绍   我把我比较喜欢的和比较关注的地方写下来和大家分享.上次我写 ...

  4. Java子类属性继承父类属性

    public abstract class Parent { String name = "parent"; } public class Son extends Parent{ ...

  5. Atitit利用反射获取子类 集合 以及继承树

    Atitit利用反射获取子类 集合 以及继承树 想从父类往下找子类的确是不可能的,要知道只要类不是final的话谁都有继承它的自由不需要事前通知父类. Eclipse实现不是重父类开始找而是重子类往回 ...

  6. C# Cache 设定缓存过期时间方法 绝对过期时间 和 相对过期时间(即:访问激活后不过期)

    摘自: http://www.cnblogs.com/zj1111184556/p/3493840.html 1. 设定绝对过期时间 /// <summary> /// 设定绝对的过期时间 ...

  7. Json to JObject转换的使用方法

    Linq to JSON是用来操作JSON对象的.可以用于快速查询,修改和创建JSON对象.当JSON对象内容比较复杂,而我们仅仅需要其中的一小部分数据时,可以考虑使用Linq to JSON来读取和 ...

  8. 使用原生JS实现一个风箱式的demo，并封装了一个运动框架

    声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的 ...

  9. SharePoint 2013 定制搜索显示模板（二）

    前言 之前一篇博客,简单的介绍了如何定制搜索显示模板,这一次,我们介绍一下如何定制搜索显示时,弹出来的那个页面,相信这个大家也都会遇到的. 1.第一部分就是搜索显示模板的部分,第二部分就是搜索项目详情 ...

  10. C#操作Excell常用方法

    这是在博客园看的文章,写的很好,所以转一下,方便自己以后用到的时候可以随时查看. range.NumberFormatLocal = "@";     //设置单元格格式为文本 r ...