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. 01背包dp+并查集 Codeforces Round #383 (Div. 2)

    http://codeforces.com/contest/742/problem/D 题目大意:有n个人,每个人有重量wi和魅力值bi.然后又有m对朋友关系,朋友关系是传递的,如果a和b是朋友,b和 ...

  2. ORA-39070

    背景介绍: 项目以前建立的库,表空间文件文件比较多,问了一下dba,了解到表空间建立很多没有带来优惠(都在一块磁盘上),效率也不会提高:现在要进行新库的迁移(目前使用的是asm磁盘组rac集群),正好 ...

  3. Linux RSS/RPS/RFS/XPS对比

    RSS适合于多队列网卡,把不同的流分散的不同的网卡多列中,至于网卡队列由哪个cpu处理还需要绑定网卡队列中断与cpu RPS:适合于单队列网卡或者虚拟网卡,把该网卡上的数据流让多个cpu处理 RFS: ...

  4. C++ 空类默认产生的类成员函数

    C++的空类有哪些成员函数:. 缺省构造函数.. 缺省拷贝构造函数.. 缺省析构函数.. 缺省赋值运算符.. 缺省取址运算符.. 缺省取址运算符 const.     注意:有些书上只是简单的介绍了前 ...

  5. log4j配置详解[http://www.iteye.com/topic/378077]

    log4j是一个非常强大的log记录软件,下面我们就来看看在项目中如何使log4j. 首先当然是得到log4j的jar档,推荐使用1.2.X版,下载地址: http://logging.apache. ...

  6. 使用 VirtualBox 虚拟机在电脑上运行 Android 4.0 系统，让电脑瞬间变安卓平板

    Ref: http://www.iplaysoft.com/android-v4-ics-for-virtualbox.html 随着 Android 手机的各种软件应用越来越多,很多没有购买的朋友都 ...

  7. SMO 的环境

    Microsoft SQL Server System CLR Types - http://go.microsoft.com/fwlink/?LinkId=123721&clcid=0x40 ...

  8. 用python写刷票程序

    刷票一般要突破以下限制: 1.验证码识别 2.同一ip不可连续投票 解决办法 1.用tesseract工具,链接在此 https://code.google.com/p/tesseract-ocr/  ...

  9. WHM使用手册by lin

    WebHost Manager 11使用手册(WHM使用手册) 本手册翻译自cpanel官方文档. 本翻译中文版本版权归美国主机侦探所有,未经允许,禁止复制. Overview(概述) 本用户手册主要 ...

  10. 通过CSS实现各种方向的三角形

    #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid tr ...