<!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. sql server 2008 评估期已过期

    解决办法: 修改注册表: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Microsoft SQL Server\100\ConfigurationState里的&quo ...

  2. EXT ajax简单实例

    转载:http://www.cnblogs.com/xiepeixing/archive/2012/10/24/2736751.html EXT ajax request是ext中对于ajax请求的实 ...

  3. (转)php中GD库的配置，解决dedecms安装中GD不支持问题

    了解gd库 在php中,使用gd库来对图像进行操作,gd库是一个开放的动态创建的图像的源代码公开的函数库,可以从官方网站http://www.boutell.com/gd处下载.目前,gd库支持gif ...

  4. Sublime Text 2 自动开启换行 Word Wrap

    首先当然要夸一下神器 Sublime Text 2,自从第一次用我就彻底把神马 Notepad++ 和 TextMate 打入冷宫,用来开发 WEB 项目从此 IDE 都不需要了! 下面讲讲如何自动开 ...

  5. eclise -The method onClick(View) of type new View.OnClickListener(){} must override a superclass method

    在做arcgis android开发的时候,突然遇到这种错误,The method onClick(View) of type new View.OnClickListener(){} must ov ...

  6. JavaScript_ECMA5数组新特性

    var arr = [ 1, 2, 3, 4, 5, 4, 3, 2, 1 ]; 新加位置的方法: indexOf lastIndexOf1.1个参数的时候表示传值 返回索引位置(index从0开始) ...

  7. cursor变换

    cursor:hand 与 cursor:pointer 的效果是一样,都像手形光标.但用FireFox浏览时才注意到使用cursor:hand在FireFox.chorme里并被支持. cursor ...

  8. Linq介绍

    什么是LINQ? LINQ全称Language Integrated Query,中文翻译"语言集成查询".在.NET框架中,大致使用三大组件实现这个封装,分别 LINQ to O ...

  9. localStorage 的基本使用

    ① localstorage大小限制在500万字符左右,各个浏览器不一致② localstorage在隐私模式下不可读取③ localstorage本质是在读写文件,数据多的话会比较卡(firefox ...

  10. 插入数据前设置字符编码为utf8

    xxx.php保存时选择utf8编码,页头最好加上 header('conten-type:text/html;charset=utf-8'); 在执行CRUD操作前先执行一下 mysql_query ...