目标：使用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. iis配置出现处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”问题

    最近重新由于一些问题要安装vs2015和oracle所以就重装了电脑,吧项目发布到本地的iis上的时候出现问题了, 像之前出现的问题一般都是重装电脑后,安装vs的时候,是先安装了vs,之后再Windo ...

  2. dobbo zookeeper 认识

    dubbo 主要使用来整合各种协议的服务,服务提供者可以向dubbo平台注册服务,服务消费都可以看到所有服务的详细信息,而已可以调用所提供的服务接口.zookeeper:主是要服务的集群,配置管理(如 ...

  3. C#封装程序集自定义类方法注释提示

    一.为什么使用封装程序集: 在很多分布式应用程序开发中,针对每一种功能可能条用的接口不一样,往往习惯将需要被调用的接口,封装成DLL给调用方应用后使用,这样既规范了调用的方式,又避免了调用出现参数请求 ...

  4. SSH(Struts2+Spring+Hibernate)框架搭建流程<注解的方式创建Bean>

    此篇讲的是MyEclipse9工具提供的支持搭建自加包有代码也是相同:用户登录与注册的例子,表字段只有name,password. SSH,xml方式搭建文章链接地址:http://www.cnblo ...

  5. [连载]《C#通讯（串口和网络）框架的设计与实现》-4.设备驱动管理器的设计

    目       录 第四章           设备驱动管理器的设计... 2 4.1           接口定义... 2 4.2           设备容器... 7 4.3          ...

  6. （原）3.1 Zookeeper应用 - Master选举

    本文为原创文章,转载请注明出处,谢谢 Master 选举 1.原理 服务器争抢创建标志为Master的临时节点 服务器监听标志为Master的临时节点,当监测到节点删除事件后展开新的一轮争抢 某个服务 ...

  7. lua-resty-websocket安装和测试

    作者:杨鑫奇 关注Openresty很久了,期待支持websocket终于出来了,看到Aapo Talvensaari同学写的文章https://medium.com/p/1778601c9e05,兴 ...

  8. Thinkcmf：页面常用函数

    Thinkcmf:页面常用函数 全站seo: 文章列表: {$site_seo_title}        <!--SEO标题--> {$site_seo_keywords}   < ...

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

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

  10. 初识JavaScript 变量, 操作符, 数组

    这里讲的不会太多, 因为所有的语言都是一样的, 一些基本的东西, 所以就随便写写. 变量 变量就是可变的量, 编程角度理解就是用于存储某种/某些数值的存储器. 我们可以把变量具象理解为一个盒子, 而我 ...