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. Confluence搭建

    参见 https://confluence.atlassian.com/display/CONF54/Installing+the+Confluence+EAR-WAR+Edition 下载5.4.4 ...

  2. mac mysql下载

    mysql下载地址:http://dev.mysql.com/downloads/mysql/,不需要账号的 mysql创建数据库,默认字符集是latin1,可以指定字符集. mac删除mysql c ...

  3. Codeforces Round 371 Div2 B.Passwords

    原题: B. Passwords time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  4. RIDE的使用

    在RIDE中,CTRL + R 自动打开report.html , CTRL + L 自动打开 log.html

  5. php给数组key：value中的key加引号

    public function Ext_json_decode($str, $mode=false){ if(preg_match('/\w:/', $str)){ $str = preg_repla ...

  6. 如何在VS2013中显示代码行号

    http://jingyan.baidu.com/article/af9f5a2d2e193543140a4533.html

  7. mysql 注册登陆表单并且操纵元素

    <?php      error_reporting(E_ALL^E_DEPRECATED^E_NOTICE);    header("content-type:text/html;c ...

  8. 让AutoMapper在你的项目里飞一会儿(转)

    出处:http://www.cnblogs.com/WeiGe/p/3835523.html 先说说DTO DTO是个什么东东? DTO(Data Transfer Object)就是数据传输对象,说 ...

  9. MT5基础知识

    获取账户相关信息 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 printf("ACCOUNT_BALANCE ...

  10. javascript操作json

    for (var i = 0; i < selectedPartList.length; i++) { if (selectedPartList[i].vpart_code == jsonRow ...