<!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. HDU5317

    题意:定义一个数K,最小质因数形式为K = a*b*c形式(如12 = 2*2*3),相同只取一个(所以12只能取2,3两个,既F[12]=2)给L,R区间,找出区间内最大的F[x](L<=x& ...

  2. ViewHolder的作用和用法

    一直都看别人用ViewHolder,自己也用过,却不知道它的作用是什么?但知道肯定很有用,而且现在android studio应该有直接生产Viewholder的插件, 不过博主我是个新手,就没尝试去 ...

  3. 强引用，弱引用，4种Java引用浅解（涉及jvm垃圾回收）

    http://www.jb51.net/article/49085.htm http://www.jb51.net/article/49085.htm

  4. 学习springMVC实例1——配置和跳转到HelloWorld

    本文让大家迅速掌握springMVC的使用方法,以最简单的方式理解此框架 一.用eclipse新建一个web项目,命名为springMVC1,tomcat的端口号为9090 二.在WEB-INF目录下 ...

  5. 0.0C语言重点问题回顾

    左值和右值得区别:左值是用来表明变量的身份的,右值更加侧重于值本身: void*是个例外,它只有基地址没有类型信息,所以无法解引用. int *p = malloc(100); char *s = m ...

  6. rhel安装eclipse

    smb --> IDE --> 环境gcc(开发c) g++(开发c++)c++操作linux --> sqlite数据库linux平台自带sqlite数据库 基本SQL语言划分:D ...

  7. angularJS学习笔记二

    angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...

  8. (转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号

    css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...

  9. java获取天气信息

    通过天气信息接口获取天气信息,首先要给项目导入程序所需要的包,具体需要如下几个包: json-lib-2.4.jar ezmorph-1.0.6.jar commons-beanutils-1.8.3 ...

  10. JQuery在光标位置插入内容

    (function($) { $.fn.extend({ insertAtCaret: function(myValue) { var $t = $(this)[0]; //IE if (docume ...