目标：使用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. 在DirectShow中支持DXVA 2.0（Supporting DXVA 2.0 in DirectShow）

    这几天在做dxva2硬件加速,找不到什么资料,翻译了一下微软的两篇相关文档.并准备记录一下用ffmpeg实现dxva2,将在第三篇写到.这是第二篇.,英文原址:https://msdn.microso ...

  2. ElasticSearch+NLog+Elmah实现Asp.Net分布式日志管理

    本文将介绍使用NLOG.Elmah结合ElasticSearch实现分布式日志管理. 一.ElasticSearch简介 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布 ...

  3. LoadRunner 实现监控Tomcat

    LoadRunenr没有监控Tomcat的专用监控器,为了用lr达到监控tomcat的目的可以通过打开Tomcat自带的Status页面之后,利用lr的关联技术得到相关的数据,把数据输出到lr自定义的 ...

  4. jQuery拉开关闭帷幕

    查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/7.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  5. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

  6. UTF-8和GBK等中文字符编码格式介绍及相互转换

    我们有很多时候需要使用中文编码格式,比如gbk.gb2312等,但是因为主要针对中文编码设置,因此并不完全通用,这样一来就有了在各编码间相互转换的需求,比如和UTF8的转换.可是在我使用的过程中,却发 ...

  7. MVC MODEL Attribute 操纵速记

    目的: 扩充Attribute 任意读取并Render 需要的Attribute     用法: @Html.ParaLabelFor(x=>x.ServiceName):@Html.ParaN ...

  8. python操作CouchDB

    安装python couchDb库: https://pypi.python.org/pypi/CouchDB/0.10 连接服务器 >>> import couchdb >& ...

  9. Android 最全Activity生命周期

    新进入Activity:onCreate > onStart > onResume 退出Activity:onPause > onStop > onDestroy 目前处于该A ...

  10. centos7搭建自己的yum源

      http://www.wenbin.cf/post/37/ 1. 安装nginx,createrepo yum install nginx -y yum install createrepo -y ...