<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         .onError {

             color: red;

         }

     </style>

 </head>

 <body>

 <form action="" id="myForm">

     <div class="init">

         <label for="username">username:</label>

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

     </div>

     <div class="init">

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

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

     </div>

     <div class="init">

         <label for="personInfo">personInfo:</label>

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

     </div>

     <div class="sub">

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

         <input type="reset" id="red"/>

     </div>

 </form>

 <script src="jquery.min.js"></script>

 <script type="text/javascript">

     $(function(){

         $('#myForm :input').blur(function(){

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

             //在创建提交元素之前，将当前元素以前的提醒元素都删除

             $parent.find('.onError').remove();

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

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

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

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

                 }

             }

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

                 if($(this).val() == "" || ($(this).val() != "" && !/\w+[@]{1}\w+[.]\w+/.test($(this).val()))){

                     var error_msg = '请输入正确的email地址';

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

                 }

             }

         }).keyup(function(){ //为达到实时验证，添加keyup 和 focus 事件

             /*注意点：

             trigger()方法触发事件后，还会执行浏览器的默认事件，例如：

             $('input').trigger("focus);

             这一行代码不仅会触发为<input>元素绑定的focus事件，

             也会使<input>元素本身得到焦点（这是浏览器的默认操作）。

             如果只想触发绑定的focus事件，而不想执行浏览器默认操作，

             可以使用jquery中另一个类似的方法---triggerHandler()

             $("input").triggerHandler("focus");

             该方法会触发<input>元素上绑定的特定事件，同时取消浏览器对此

             事件的默认操作，即文本框只触发绑定的focus事件，不会得到焦点。

             */

             /*这里，trigger('blur')不仅会触发为元素绑定的blur事件，

             也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。

             而triggerHandler('blur')只会触发为元素绑定的blur事件，

             而不触发浏览器默认的blur事件*/

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

         }).focus(function(){

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

         });

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

             $('#myForm .init :input').trigger('blur');

             var numError = $('#myForm .init .onError').length;

             if(numError){

                 return false;

             }

             alert("注册成功，密码已发送至您的邮箱！");

         });

     });

 </script>

 </body>

 </html>

jquery表单实时验证的更多相关文章

  1. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  2. Jquery表单验证插件validate

    写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

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

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

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

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

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

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

  6. jquery 表单验证插件

    其他: <form action=""> First name: <input type="text" name="FirstNam ...

  7. jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...

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

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

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

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

随机推荐

  1. codevs 1746 贪吃的九头龙

    /* 状态定义的没错 就是考试的时候傻啦吧唧的转移左右孩子 其实之转移父亲就简单多了 不用考虑那么多 还有就是偷懒没有把谁有没有找过这个信息转过去 而是搞了个全局变量…wa到挺 再就是特盘的时候还有终 ...

  2. 在java中可有两种方式实现多线程，一种是继承Thread类，一种是实现Runnable接口

    //继承thread类 class PrimeThread extends Thread{ long minPrime; PrimeThread(long minPrime) { this.minPr ...

  3. 四、C#方法和参数

    方法是一种组合一系列语句以执行一个特定操作或计算一个特殊结果的方式. 它能够为构成程序的语句提供更好的结构和组织.   在面向对象的语言中,方法总是和类关联在一起的,我们用类将相关的方法分为一组. 方 ...

  4. Shell 脚本编程笔记（一） Hello Shell

    最近不断在接触Linux操作系统,对它一个终端走天下的特性感到十分新奇和伟大.同时也被各种命令折磨的死去活来...公司的一个老同事给我讲,在公司的极品geek宅都是只用一个黑黑的框完成一切的.结果我一 ...

  5. Java学习----不变的常量

    byte: -128~+127 short int:129 long float:1.5f  (1.5被系统默认为double) double:4.5d char:'s'  '1' boolean:t ...

  6. 纯js制作遮罩层对话框 -- g皓皓

    //本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  7. sublime常用插件及配置，自留自用

    1.Angularjs 写angularjs经常操作template文件,没有一个ng-xx的提示真的很蛋疼是不是,有些服务的名字记不住是不是,那就用这个插件吧 2.AutoFileName 如果你的 ...

  8. Linux下安装LANMP环境

    记录下来,方便下次再用时从头查找资料 首先是操作系统和php环境:CentOS 6.5 64位(之所以不是7.0是因为本身对linux不熟,而7.0改变挺大的,搜索查询资料也不好搜索),Php版本:5 ...

  9. select 下拉菜单Option对象使用add(elements,index)方法动态添加

    原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后 ...

  10. MongoDB-固定集合 capped collection 操作 介绍

    固定集合:capped collection 是性能出色的固定大小的集合,以LRU算法淘汰记录,自助维护集合中的对象的插入顺序,创建时预先制定大小,空间使用完,心对象取代旧的对象,保持最新的数据. 可 ...