<!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. M100 (0)开发

    [SDCC 2015现场]大疆Paul Yang:多旋翼飞行器的未来就是机器人的未来 http://www.csdn.net/article/2015-11-19/2826268 开发官网 https ...

  2. day10，11练习

    1.执行Python脚本两种方式? 略 2.简述位.字节关系? 8位一个字节 3.简述ASCII,Unicode,utf-8,gbk关系? ascii unicode utf8 4.请写出李杰分别用u ...

  3. mysql 创建表格 AUTO_INCREMENT

    CREATE TABLE `t_user` ( `USER_ID` int(11) NOT NULL AUTO_INCREMENT, `USER_NAME` char(30) NOT NULL, `U ...

  4. mybatis逆向工程之maven工程

    maven工程与动态web工程存在差异,不过大体是相同的 注意:运行成功后记得refresh刷新下,否则看不到 一.在pom文件中进行如下配置 <project xmlns="http ...

  5. Echo团队Alpha冲刺随笔 - 第三天

    项目冲刺情况 进展 完成了三分一左右,前端整体页面框架已有,后端也在稳步推进 问题 今天问题较少,主要还是出在对于框架的掌握上 心得 继续加油! 今日会议内容 黄少勇 今日进展 实现社区公告,个人信息 ...

  6. Android开发中代码下面出现波浪线问题

    在Android Studio中写代码时,经常会在一个英文单词的下面出现波浪线,这是因为系统检测到你的这个英文单词不符合规范,如下所示: 解决办法:选中这个单词,点击鼠标右键,点击:Spelling ...

  7. Android ScrollView和ListView联用，且ListView可以下拉刷新和上拉加载

    ScrollView嵌套listView且ListView可以实现上拉加载. 由于代码太长,在此只提供实现思路: 先不说上拉加载的事,咱们先回想一下,ScrollView和LsitView联用,时的解 ...

  8. 十行代码--用python写一个USB病毒 (知乎 DeepWeaver)

    昨天在上厕所的时候突发奇想,当你把usb插进去的时候,能不能自动执行usb上的程序.查了一下,发现只有windows上可以,具体的大家也可以搜索(搜索关键词usb autorun)到.但是,如果我想, ...

  9. Intellij Idea 返回上次编辑快捷键设置

    由于默认的返回上次编辑快捷键和和笔记本冲突. 需要从新设置快捷键. 找了好久终于找到了.  分别选中Back和Forward后设置新的快捷键即可

  10. springboot @Value 获取计算机中绝对路径文件的内容

    默认情况下使用 @Value("aaa.txt") private Resource txtResource; 这样获取到的是项目classpath 下的 aaa.txt 如果想获 ...