1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style>
  7.          .onError {
  8.              color: red;
  9.          }
  10.      </style>
  11.  </head>
  12.  <body>
  13.  <form action="" id="myForm">
  14.      <div class="init">
  15.          <label for="username">username:</label>
  16.          <input type="text" id="username"/>
  17.      </div>
  18.  
  19.      <div class="init">
  20.          <label for="email">email:</label>
  21.          <input type="text" id="email"/>
  22.      </div>
  23.  
  24.      <div class="init">
  25.          <label for="personInfo">personInfo:</label>
  26.          <input type="text" id="personInfo"/>
  27.      </div>
  28.  
  29.      <div class="sub">
  30.          <input type="submit" value="提交" id="send"/>
  31.          <input type="reset" id="red"/>
  32.      </div>
  33.  </form>
  34.  <script src="jquery.min.js"></script>
  35.  <script type="text/javascript">
  36.      $(function(){
  37.          $('#myForm :input').blur(function(){
  38.              var $parent = $(this).parent();
  39.              //在创建提交元素之前，将当前元素以前的提醒元素都删除
  40.              $parent.find('.onError').remove();
  41.              if($(this).is('#username')){
  42.                  if($(this).val() == "" || $(this).val().length < 6){
  43.                      var error_msg = '请至少输入6位的用户名';
  44.                      $parent.append('<span class="onError">'+error_msg+'</span>');
  45.                  }
  46.              }
  47.  
  48.              if($(this).is('#email')){
  49.                  if($(this).val() == "" || ($(this).val() != "" && !/\w+[@]{1}\w+[.]\w+/.test($(this).val()))){
  50.                      var error_msg = '请输入正确的email地址';
  51.                      $parent.append('<span class="onError">'+error_msg+'</span>');
  52.                  }
  53.              }
  54.          }).keyup(function(){ //为达到实时验证，添加keyup 和 focus 事件
  55.              /*注意点：
  56.              trigger()方法触发事件后，还会执行浏览器的默认事件，例如：
  57.              $('input').trigger("focus);
  58.              这一行代码不仅会触发为<input>元素绑定的focus事件，
  59.              也会使<input>元素本身得到焦点（这是浏览器的默认操作）。
  60.  
  61.              如果只想触发绑定的focus事件，而不想执行浏览器默认操作，
  62.              可以使用jquery中另一个类似的方法---triggerHandler()
  63.              $("input").triggerHandler("focus");
  64.              该方法会触发<input>元素上绑定的特定事件，同时取消浏览器对此
  65.              事件的默认操作，即文本框只触发绑定的focus事件，不会得到焦点。
  66.              */
  67.  
  68.              /*这里，trigger('blur')不仅会触发为元素绑定的blur事件，
  69.              也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。
  70.              而triggerHandler('blur')只会触发为元素绑定的blur事件，
  71.              而不触发浏览器默认的blur事件*/
  72.              $(this).triggerHandler('blur');
  73.          }).focus(function(){
  74.              $(this).triggerHandler('blur');
  75.          });
  76.  
  77.          $('#send').click(function(){
  78.              $('#myForm .init :input').trigger('blur');
  79.              var numError = $('#myForm .init .onError').length;
  80.              if(numError){
  81.                  return false;
  82.              }
  83.              alert("注册成功，密码已发送至您的邮箱！");
  84.          });
  85.      });
  86.  </script>
  87.  </body>
  88.  </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. VB 活动添加item元素

    'ListView1.Columns.Clear() 'ListView1.Columns.Add("", 0, HorizontalAlignment.Center) 'List ...

  2. (转) dedecms中自定义数据模型

    刚学习完dedecms的标签语法,我有很多困惑,觉得标签的意义比较抽象,不知道如何用标签来写一些具体的内容.如果有一些数据库的编程经验,就知道一个很常用的编程范例—增删改查.比如说,我要建立的是书本的 ...

  3. HTML5 Canvas 概述

    本文中,我们将探索如何使用HTML5的Canvas API.Canvas API很酷,我们可以通过它来动态创建生成和展示图形,图表,图像以及动画.本文将使用渲染API(rendering API)的基 ...

  4. Xcode工程添加第三方文件的详细分析 Create folder references for any added folders

    在开发iOS项目的时候需要导入第三方的库文件,但是通过Xcode导入第三方源文件的时候会提示一些信息,不知所以然. 现在看到的文档都是针对Xcode3的,针对Xcode4的说明很少,现在分享出来. 官 ...

  5. AFNetworking使用详解

    导语: 众所周知,AFNetworking是目前IOS开发中非常受欢迎的第三方网络通信类库,同时AFNetworking对苹果官方NSURLConnection和NSURLSession进行了封装,使 ...

  6. cas sso单点登录系列7_ 单点登录cas常见问题系列汇总

    转:http://blog.csdn.net/matthewei6/article/details/50709252 单点登录cas常见问题(一) - 子系统是否还要做session处理?单点登录ca ...

  7. POJ2566-Bound Found (尺取法)

    POJ2566-Bound Found 题目大意:给出一段长度为n的数列,数列中的元素有正有负,求一段连续的区间,使得该区间的和的绝对值最接近给定的值 尺取法一般适用于对一段连续的区间的和进行处理的情 ...

  8. grails-MappingException: Could not determine Type

    在用grails的时候遇到这个问题,反复调试了很久,没有进展,同时敲了几个命令后好了,真纠结,这是框架的问题吗? 问题: Caused by MappingException: Could not d ...

  9. window.onload() 等待所有的数据加载都完成之后才会触发

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. [前端笔记]第一篇:html

    什么是 HTML? HTML 是用来描述网页的一种语言.HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言,而是一种标记语言 (mark ...