表单是网页的一个重要组成部分。本节做一个简单的表单提交网页然后利用jQuery实现表单的验证。后续的表单完善以及功能的完善会在以后的博客中给出。

　　效果图：

代码：

 <!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="style.css" rel="stylesheet" type="text/css" /> -->

 <style type="text/css">

     body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}

     form div { margin:5px 0;}

     .int label { float:left; width:100px; text-align:right;}

     .int input { padding:1px 1px; border:1px solid #ccc;height:16px;}

     .sub { padding-left:100px;}

     .sub input { margin-right:10px; }

     .formtips{width: 200px;margin:2px;padding:2px;}

     .onError{

         background:#FFE0E9 url(img/reg3.gif) no-repeat 0 center;

         padding-left:25px;

     }

     .onSuccess{

         background:#E9FBEB url(img/reg4.gif) no-repeat 0 center;

         padding-left:25px;

     }

     .high{

         color:red;

     }

 </style>

 <script type="text/javascript" src="../../../scripts/jquery-1.7.2.js"></script>

 <script type="text/javascript">

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

         });

         //最终验证

         $("#send").click(function(){

             $("form .required:input").trigger("blur");

             var numError = $("form .onError").length;

             //numError>0,有错，false.阻止表单提交》return false

             if(numError){

                 return false;

             }

             alert("注册成功，密码已发送至邮箱，注意查收！");

         });

     })

 </script>

 </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="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. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  2. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  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运行试下,先睹为快.猛戳链接--> ...

  10. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

随机推荐

  1. VS2010 安装使用STLPort

    VS2010 安装使用STLport 1.本机环境 win7 64位 visual studio 2010 中文旗舰版 STLport-5.2.1.tar.bz2 2.下载STLport http:/ ...

  2. 如何为libs目录下的jar包关联源代码

    以前,我们可以为lib目录下的jar包关联源代码,但是现在似乎不行了. 下面是一篇讲述此问题解决方法的文章: How to attach javadoc or sources to jars in l ...

  3. 利用.htaccess绑定子域名到子目录（亲测万网可用）

    http://www.xmgho.com/archives/783.html  利用.htaccess绑定域名到子目录,前提你的空间服务器必须支持apache的rewrite功能,只有这样才能使用.h ...

  4. Codeforces Round #369 (Div. 2) A B 暴力 模拟

    A. Bus to Udayland time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  5. H5标签-canvas实现颜色拾取功能

    HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...

  6. java 日期格式 毫秒

    参考URL:http://www.busfly.net/csdn/post/java_string_fomat_date_time_simpledateformat.html 关键代码: java.t ...

  7. leetcode 153. Find Minimum in Rotated Sorted Array --------- java

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  8. Codeforces Round #146 (Div. 2)

    A. Boy or Girl 模拟题意. B. Easy Number Challenge 筛素数,预处理出\(d_i\). 三重循环枚举. C. LCM Challenge 打表找规律. 若\(n\ ...

  9. Codeforces Round #108 (Div. 2)

    Codeforces Round #108 (Div. 2) C. Pocket Book 题意 给定\(N(N \le 100)\)个字符串,每个字符串长为\(M(M \le 100)\). 每次选 ...

  10. poj2375 强连通

    题意:有一个 l * w 大小的滑雪场,每个格子都有一个高度,每个格子可以直接通到上下左右四个格子中高度小于等于自己的格子,现在要建立通道,能够连通任意两个格子,问最少建多少通道能够使所有格子能够互相 ...