<!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. android requestWindowFeature使用详解

    requestWindowFeature可以设置的值有:          1.DEFAULT_FEATURES:系统默认状态,一般不需要指定          2.FEATURE_CONTEXT_M ...

  2. JY03-HTML/CSS-京东02

    ---恢复内容开始--- 1. position:absolute 1.1 绝对定位设置定位值为百分比时: 如设置right:50%,即元素右侧外边框距离父盒子右侧始终始终为父盒子宽度的一半. 可以使 ...

  3. [转] NSString / NSMutableString 字符串处理，常用代码

     原文 :  http://justcoding.iteye.com/blog/1405951 Objective-C 中核心处理字符串的类是 NSString 与 NSMutableString , ...

  4. C# == 和equals()区别

    如以下代码: ? 1 2 3 4 5 int age = 25; short newAge = 25; Console.WriteLine(age == newAge);  //true Consol ...

  5. cas配置全攻略(转)

    转:http://www.blogjava.net/tufanshu/archive/2011/01/21/343290.html 经过将近两天的测试,参考众多网友的贡献,终于完成了对cas的主要配置 ...

  6. ReetrantLock Synchronized Atomic的性能对比

    之前看到了一篇帖子关于Lock和Synchronized的性能,写的是Lock比Synchronized的性能要好,可是,我试了下,结果却不是这样的,我所使用的JDK的版本是1.7,可能跟原帖作者用的 ...

  7. 【USACO 1.4.1】铺放矩形块

    [描述] 给定4个矩形块,找出一个最小的封闭矩形将这4个矩形块放入,但不得相互重叠.所谓最小矩形指该矩形面积最小.               所有4个矩形块的边都与封闭矩形的边相平行,图1示出了铺放 ...

  8. C#三种方式实现序列化(转)

    序列化和反序列化我们可能经常会听到,其实通俗一点的解释,序列化就是把一个对象保存到一个文件或数据库字段中去,反序列化就是在适当的时候把这个文件再转化成原来的对象使用. 序列化和反序列化最主要的作用有: ...

  9. ch01.深入理解C#委托及原理(转)

    ch01..深入理解C#委托及原理_<没有控件的ASPDONET> 一.委托 设想,如果我们写了一个厨师做菜方法用来做菜,里面有 拿菜.切菜.配菜.炒菜 四个环节,但编写此方法代码的人想让 ...

  10. 在sublimetext上打造一个兼容virtualenv的web&python开发环境

    利用Sublimetext3&virtualenv 打造一个Web&Python IDE 注: 环境:window|python3;以下使用的sublimetext插件均用packag ...