<!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. 深入浅出的webpack构建工具---ParallelUglifyPlugin优化压缩(十)

    webpack默认提供了UglifyJS插件来压缩JS代码,但是它使用的是单线程压缩代码,也就是说多个js文件需要被压缩,它需要一个个文件进行压缩.所以说在正式环境打包压缩代码速度非常慢(因为压缩JS ...

  2. 三、java三大特性--多态

    面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. 继承 ...

  3. 3.1《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——下载文件

    首先,为了不手动创建一个长文件(这太麻烦了),我们将使用强大的curl(有时也写作"cURL")工具从网上下载一个文件,这个命令可以让命令行与URL交互.尽管这不是Unix核心命令 ...

  4. c# create html table test

    string html = "<html><head><title>44444444</title>"; html += @&quo ...

  5. 如何实现.net程序的进程注入

    原文:如何实现.net程序的进程注入   如何实现.net程序的进程注入                                   周银辉 进程注入比较常见,比如用IDE调试程序以及一些Sp ...

  6. 轻量级WebApi请求插件：PostMan

    时间很宝贵,废话不多说,只说三句,如下: 十年河东,十年河西,莫欺骚年穷!~_~ 打错个字,应该是莫欺少年穷! 学历代表你的过去,能力代表你的现在,学习代表你的将来. 学无止境,精益求精. 本次介绍的 ...

  7. 在平衡树的海洋中畅游（一）——Treap

    记得有一天翔哥毒奶我们: 当你们已经在平衡树的海洋中畅游时,我还在线段树的泥沼中挣扎. 我觉得其实像我这种对平衡树一无所知的蒟蒻也要开一开数据结构了. 然后花了一天啃了下最简单的平衡树Treap,感觉 ...

  8. Spring Boot(十六)：使用 Jenkins 部署 Spring Boot

    Jenkins 是 Devops 神器,本篇文章介绍如何安装和使用 Jenkins 部署 Spring Boot 项目 Jenkins 搭建.部署分为四个步骤: 第一步,Jenkins 安装 第二步, ...

  9. 【数据库】Mysql中主键的几种表设计组合的实际应用效果

    写在前面 前前后后忙忙碌碌,度过了新工作的三个月.博客许久未新,似乎对忙碌没有一点点防备.总结下来三个月不断的磨砺自己,努力从独乐乐转变到众乐乐,体会到不一样的是,连办公室的新玩意都能引起莫名的兴趣了 ...

  10. 身在上海的她，该不该继续"坚持"前端开发？

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 一 对于目前的IT行业,我实在不想她还没在这个行业中站稳脚跟就开始有 ...