<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title></title>
 <style>
 </style>
</head>
<body>
<form action="" method="post">
 <div class="int">
  <label for="username">用户名：</label>
  <input type="text" id="username" class="required"/>
 </div>
 <div class="int">
  <label for="email">邮箱：</label>
  <input type="text" id="email" class="required"/>
 </div>
 <div class="sub">
  <input type="submit" value="提交" id="send"/>
  <input type="reset" value="重置" id="res"/>
 </div>
</form>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
 $("form :input.required").each(function(){
//  先清除已经加上的
  var $required=$("<strong style='color:red' class='high'>*</strong>");
  $(this).parent().append($required);
 });
 $('form :input').blur(function(){
  var $parent=$(this).parent();
  $parent.find(".formtips").remove();
  if($(this).is('#username')){
   if(this.value==""||this.value.length<6){
    var erroMsg='请输入至少6位的用户名.';
    $parent.append('<span class="formtips onError" >'+erroMsg+'</span>')
   }else{
    var okMsg='输入正确.';
    $parent.append('<span class="formtips onSuccess" >'+okMsg+'</span>')
   }
  }
  if($(this).is('#email')){
   if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
    var eerroMsg='请输入正确的E-Mail地址.';
    $parent.append('<span class="formtips onError" >'+eerroMsg+'</span>')
   }else{
    var eokMsg='输入正确.';
    $parent.append('<span class="formtips onSuccess" >'+eokMsg+'</span>')
   }
  }
 }).keyup(function(){
  $(this).triggerHandler("blur");
 }).focus(function(){
  $(this).triggerHandler("blur");
 });
// 触发事件，全部再检验一次
 $('#send').click(function(){
  $("form .required:input").trigger('blur');
  var numError=$('form .onError').length;
  if(numError){
   return false;
  }
  alert("注册成功，密码已经发到你的邮箱，请查收。");
 })
// trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）。
// 该方法与 triggerHandler() 方法类似，不同的是 triggerHandler() 不触发事件的默认行为。
// 与 triggerHandler() 方法相比的不同之处:
//  它不会引起事件（比如表单提交）的默认行为
//  .trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
// 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
</script>
</html>

Jquery 组 表单验证的更多相关文章

  1. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  2. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  3. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  4. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  5. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  6. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  7. jQuery的表单验证

    jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. Jquery 实现表单验证，所有验证通过方可提交

    1. [代码]Jquery 实现表单验证,所有验证通过方可提交 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  9. jQuery Validate 表单验证 — 用户注册简单应用

    相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...

随机推荐

  1. 【Codeforces Round 1110】Codeforces Global Round 1

    Codeforces Round 1110 这场比赛只做了\(A\).\(B\).\(C\),排名\(905\),不好. 主要的问题在\(D\)题上,有\(505\)人做出,但我没做出来. 考虑的时候 ...

  2. 新版本grafana添加数据源报错！

    前提: grafana配置的数据源url没有错误. 现象: 1)升级完grafana之后发现原来配置的open-facon数据源无效了,一直提示HTTP ERROR NOT FOUND. 2)安装新版 ...

  3. USB协议枚举过程详解

    一 枚举过程之文字描述 ?主机集线器监视着每个端口的信号电压,当有新设备接入时便可觉察.(集线器端口的两根信号线的每一根都有15kΩ的下拉电阻,而每一个设备在D+都有一个1.5kΩ的上拉电阻.当用US ...

  4. 移动电力猫HG260GT pon实现路由拨号

    帐号CMCCAdmin密码aDm8H%MdA 需要将原来上网的路由模式改成如下图中的桥接模式 实际应该就是将上网vlan连接到了1号口,这样路由就可以通过一号口接入拨号了 修改后再通过无线接入路由就不 ...

  5. Apache与Nginx

    Apache与Nginx的优缺点比较  ---   1.nginx相对于apache的优点: 轻量级,同样起web 服务,比apache占用更少的内存及资源 抗并发,nginx 处理请求是异步非阻塞的 ...

  6. jquery ajax超时设置（转载）

    var ajaxTimeoutTest = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : 'get', //请求方式,g ...

  7. Bayesian Personalized Ranking 算法解析及Python实现

    1. Learning to Rank 1.1 什么是排序算法 为什么google搜索 ”idiot“ 后,会出现特朗普的照片? “我们已经爬取和存储了数十亿的网页拷贝在我们相应的索引位置.因此,你输 ...

  8. hadoop_spark伪分布式实验环境搭建和运行实例详细教程

    hadoop+spark伪分布式环境搭建 安装须知 单机模式(standalone): 该模式是Hadoop的默认模式.这种模式在一台单机上运行,没有分布式文件系统,而是直接读写本地操作系统的文件系统 ...

  9. Jlink使用技巧之虚拟串口功能

    前言 串口调试是单片机开发过程必不可少的一个功能,一般是使用一个UART-TTL的串口模块来实现串口的功能,其实下载调试使用的Jlink仿真器也可以实现串口调试的功能,本篇文章将介绍如何使用Jlink ...

  10. JVM规范系列第1章：引言

    如果你还没下载<Java虚拟机规范>这本书,那么先点击这里下载再一块儿看吧. 前言 Java 虚拟机是一个抽象化的机器,整个规范中提及的 Java 虚拟机都是抽象化的概念,而不是特指 Or ...