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();

           //验证username

           if($(this).is('#username')){

             if(this.value=="" || this.value.length < 6){

                var errorMsg = '请输入至少6位的username.';

                $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("注冊成功,password已发到你的邮箱,请查收.");

   });

//重置

  $('#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之简单的表单验证

    html部分: <body> <form method="post" action=""> <div class="in ...

  2. 用jquery实现简单的表单验证

    HTML代码: 1 <form action="" method="post" id="form-data"> 2 <di ...

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

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

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

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

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

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

  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. javascript:正则表达式、一个表单验证的例子

    本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的例子 首发日期:2018-05-13 正则表达式: 正则表达式的使用方法: 首先创 ...

  9. 使用 WTForms 进行表单验证的例子

    #使用 WTForms 进行表单验证的例子 from wtforms import Form from wtforms import BooleanField from wtforms import ...

随机推荐

  1. [AngularJS] Write a simple Redux store in AngularJS app

    The first things we need to do is create a reducer: /** * CONSTANT * @type {string} */ export const ...

  2. ios开发核心动画五：转场动画

    #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutl ...

  3. Nutch+Hadoop集群搭建 分类： H3_NUTCH 2015-01-18 10:55 362人阅读 评论(0) 收藏

    转载自:http://www.open-open.com/lib/view/open1328670771405.html 1.Apache Nutch    Apache Nutch是一个用于网络搜索 ...

  4. 【Nutch2.2.1基础教程之6】Nutch2.2.1抓取流程 分类： H3_NUTCH 2014-08-15 21:39 2530人阅读 评论(1) 收藏

    一.抓取流程概述 1.nutch抓取流程 当使用crawl命令进行抓取任务时,其基本流程步骤如下: (1)InjectorJob 开始第一个迭代 (2)GeneratorJob (3)FetcherJ ...

  5. TextView之一：子类的常用属性 分类： H1_ANDROID 2013-10-30 15:14 770人阅读 评论(0) 收藏

    TextView常见的子类包括EditText,Button,CheckBox, RadioButton等. 1.EditText EditText继承自TextView,因此TextView所有属性 ...

  6. php实现包含min函数的栈（这个题目用另外一个栈做单调栈的话时间复杂度会低很多）

    php实现包含min函数的栈(这个题目用另外一个栈做单调栈的话时间复杂度会低很多) 一.总结 这个题目用另外一个栈做单调栈的话时间复杂度会低很多 二.php实现包含min函数的栈 题目描述 定义栈的数 ...

  7. 我眼中的c++编程总结-20150602

    断断续续的学习了非常多东西,有51.Avr.ARM.PLC.C\C++.C#.TB.MC.mql4.linux....等等,近乎填鸭或者囫囵吞枣的.甚至饿狼般的扑到里面,慢慢的积累和理解中,非常多知识 ...

  8. Android 5.0中使用JobScheduler

    在这篇文章中,你会学习到在Android 5.0中怎样使用JobScheduler API. JobScheduler API同意开发人员在符合某些条件时创建运行在后台的任务. 介绍 在Android ...

  9. RFC chinese

    rfc专业性强,现实中不可能有好的全的rfc的翻译 尝试上在github上搜索 https://github.com/tidyjiang8/6lowpan-rfcs-chinese 诚如作者所说: 在 ...

  10. Android Gradle Plugin指南（三）——依赖关系、android库和多项目配置

    原文地址:http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Dependencies-Android-Librari ...