html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <!-- 引入jQuery -->
  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
     //<![CDATA[
     $(function(){
        //如果是必填的，则加红星标识
        $("form :input.required").each(function(){
           var $required = $("<strong 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 errorMsg = '请输入至少6位的用户名.';
                $parent.append('<span class="formtips onError">'+errorMsg+'</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 errorMsg = '请输入正确的E-Mail地址.';
                  $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
              }else{
                  var okMsg = '输入正确.';
                  $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
              }
            }
      }).keyup(function(){
          $(this).triggerHandler("blur");
      }).focus(function(){
          $(this).triggerHandler("blur");
   });//end blur

//提交，最终验证
  $('#send').click(function(){
    $("form :input.required").trigger('blur');
    var numError = $('form .onError').length;
    if(numError){
       return false;
    }
    alert("注册成功,密码已发到你的邮箱,请查收.");
   });

//重置
  $('#res').click(function(){
     $(".formtips").remove(); 
  });
})
//]]>
</script>
</head>
<body>

<form method="post" action="">
 <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="int">
  <label for="personinfo">个人资料:</label>
  <input type="text" id="personinfo" />
 </div>
 <div class="sub">
  <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
 </div>
</form>

</body>
</html>

JQuery中一个简单的表单验证的实例的更多相关文章

  1. 用jQuery写的最简单的表单验证

    近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...

  2. angularjs学习第四天笔记（第一篇：简单的表单验证）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  3. Struts2之Action三种接收参数形式与简单的表单验证

    有了前几篇的基础,相信大家对于Struts2已经有了一个很不错的认识,本篇我将为大家介绍一些关于Action接收参数的三种形式,以及简单的表单验证实现,下面进入正题,首先我们一起先来了解一下最基本的A ...

  4. es6 封装一个基础的表单验证

    1, 需求分析 设计一个通用的表单验证,如果后期表单中添加了更多的需求,不需要更改之前的代码逻辑,最好不要改之前的代码,需要加什么直接加就好了. 2,代码分析 此表单验证最好返回一个函数,在api设计 ...

  5. 使用jquery插件validate制作的表单验证案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 使用 layUI做一些简单的表单验证

    使用 layUI做一些简单的表单验证 <form method="post" class="layui-form" > <input name ...

  7. 简单js表单验证

     简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...

  8. 【干货】Laravel --Validate (表单验证) 使用实例

    前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...

  9. 简单的表单验证插件（Jquery）

    在做web开发的时候经常遇到表单验证问题,表单验证一般有客户端验证和服务器端验证,这个验证插件仅仅能满足我的项目中的基本需求的. Validate_Tools.js function Validate ...

随机推荐

  1. HDU 5777 domino

    贪心一下.有k次机会,也就是那些数字中,最大的k-1可以不选择.答案为:sum{a[i]}-sum{最大的k-1个a[i]}+n.注意:k>=n的时候直接输出n. #pragma comment ...

  2. 笔记整理--Linux_Socket

    揭开Socket编程的面纱 - 博客 - 伯乐在线 - Google Chrome (2013/9/22 19:28:24) 揭开Socket编程的面纱 2013/09/21 | 分类: IT技术 | ...

  3. linux设置时间服务器

    对多个linux服务器,时间保持一致是很必要的.根据精确度要求,应该有相应的时间间隔进行时间同步.如果不进行时间同步,时间久了就会差别很大,遇到问题时定位就很困难.因为多台设备的配合,log之间可能有 ...

  4. find排除目录

    在linux find 进行查找的时候,有时候需要忽略某些目录不查找,可以使用 -prune 参数来进行过滤,但必须要注意要忽略的路径参数必须紧跟着搜索的路径之后,否则该参数无法起作用. 命令语法: ...

  5. hdu_5806_NanoApe Loves Sequence Ⅱ(双指针)

    题目链接:hdu_5806_NanoApe Loves Sequence Ⅱ 题意: 给你一段数,问你有多少个区间满足第K大的数不小于m 题解: 直接双指针加一下区间就行 #include<cs ...

  6. 无论url请求什么.都可以拼接class类名.实例化.传递get参数-->给当前控制器-->传递给抽象父类-->都交给抽象父类.这个方法去处理call_user_func_array()

    <?phpdefine('DS','/');define('A_PATH',str_replace('\\','/',dirname(__FILE__)).DS); //01获取到主程序目录cl ...

  7. 触动精灵 alilib

    --gethtml function gethtml (url) local sz = require("sz") local http = require("szock ...

  8. flashbuilder mx组件 MenuBar

    来源:http://www.cuplayer.com/player/PlayerCode/Flex/2013/0118661.html <fx:Script> <![CDATA[ i ...

  9. Nginx配置性能优化与压力测试webbench【转】

    这一篇我们来说Nginx配置性能优化与压力测试webbench. 基本的 (优化过的)配置 我们将修改的唯一文件是nginx.conf,其中包含Nginx不同模块的所有设置.你应该能够在服务器的/et ...

  10. Qt之QTextCodec乱谈

    何处开始呢? 一旦在Qt程序中出现latin1字符集以外的字符,几乎大家无一例外的会用到 QTextCodec. 而不少网友不分青红皂白,一旦用到中文,就同时使用下面3条指令(其中textc 取为 g ...