目标：使用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. button 按钮，结合onclick事件，验证和提交表单

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

  2. 能力素质模型咨询工具(Part1)

          之前写过由企业家基本素质想到的文章,里面提及一些能力与素质,以下有内容也可以参考: 领导职位 表6-1 远见卓识的行为表现 级 别 行 为 表 现 A (1)关注行业的前景和环境的变化, ...

  3. Asp.net mvc5开源项目"超级冷笑话"

    业务时间做了个小网站,超级冷笑话,地址:http://www.superjokes.cn/ 开发技术: asp.net mvc5 +SQLServer2012 ORM:NPoco 用了简单的三层结构 ...

  4. jQuery用户数字评分效果

    效果预览:http://hovertree.com/texiao/jquery/5.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  5. 常用ArcGIS for Silverlight 开发API介绍

    1.API介绍 2.Map对象  3.Layer对象 4.Symbol对象 5.Task对象

  6. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q139-Q141)

    Question 139You create a SharePoint solution that contains two Features named Feature1 and Feature2. ...

  7. iOS MJRefresh设置MJRefreshStateNoMoreData状态图片

    MJRefresh地址 //  代码地址: https://github.com/CoderMJLee/MJRefresh//  代码地址: http://code4app.com/ios/%E5%B ...

  8. Android添加图片到ListView或者 RecyclerView显示

    先上图 点击+号就去选择图片 实际上这个添加本身就是一个ListView或者 RecyclerView 只是布局有些特殊 item <?xml version="1.0" e ...

  9. 使用PhoneGap开启移动开发之旅

    移动市场风起云涌,只是好像和悲催的.net程序员隔绝.我们内心中一直期待的Windows Phone终究不能匹及windows, 随着时间的流逝,windows phone越来越像扶不起的阿斗,连微软 ...

  10. MySQL 使用XtraBackup的shell脚本介绍

    mysql_backup.sh是关于MySQL的一个使用XtraBackup做备份的shell脚本,实现了简单的完整备份和增量备份.以及邮件发送备份信息等功能.功能目前还比较简单,后续将继续完善和增加 ...