<!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. Adobe DreamweaverCS6安装及破解（序列号+破解补丁）

    一:安装 1) Adobe DreamweaverCS6中文版下载地址:Adobe DreamweaverCS6中文版下载 2)Adobe DreamweaverCS6安装及破解说明下载地址:Adob ...

  2. IE8-下背景色半透明滤镜在jquery动画中失效问题记录

    前两天,UIer跟我说,把这些按钮都悬浮在这个图片上!我心中千万头草泥马奔过,图片各种各样.花花绿绿.五颜六色的,这几个按钮也没有多大的光环围绕,用户一眼看上去恐怕会以为这是图片的一部分吧!~~~我假 ...

  3. Linux特殊权限

    ************************     ACL权限       ****************************************** acl权限的出现是为了弥补用户权 ...

  4. cocos2dx 3.2中的物理引擎初探(一)

    cocos2dx在设计之初就集成了两套物理引擎,它们是box2d和chipmunk.我目前使用的是最新版的cocos2dx 3.2.引擎中默认使用的是chipmunk,如果想要改使用box2d的话,需 ...

  5. python之map和filter

    li = [11,22,33,44,55,66] ret = filter(lambda a:a>33,li) print(list(ret)) ret2 = map(lambda a:a+10 ...

  6. jQuery.noConflict()防冲突机制

    许多JS库都非常喜欢使用$作为函数.变量.有时候,由于页面复杂的历史问题,或者为了实现特定的功能,我们不得不在页面中引入多个JS库.今儿个来学习学习jQuery库是怎么解决$冲突问题.(jQuery- ...

  7. Spark笔记--使用Maven编译Spark源码(windows)

    1. 官网下载源码 source code,地址: http://spark.apache.org/downloads.html 2. 使用maven编译: 注意在编译之前,需要设置java堆大小以及 ...

  8. SpringMVC入门1

    SpringMVC核心类与接口 •DispatcherServlet 前端控制器(也称总控制器),把请求给转发到具体的控制类 •HandlerMapping 映射处理器,负责映射中央处理器转发给con ...

  9. Resharper 8.0 的最实用的功能

    在 8.0 里面.resharper 加入了 插件nuget方式 以前引用resharper插件.都是从新安装,复制进去,或者其他方式.比如resharper xunit  测试 我用xunit 插件 ...

  10. SCALA中类的继承

    慢慢的,回想起以前学习JAVA和C#当中的的类的特性了. 感觉大同小异吧... package com.hengheng.scala class OOPInScala { } class Studen ...