表单是网页的一个重要组成部分。本节做一个简单的表单提交网页然后利用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. java zip文件的解压缩（支持中文文件名）

    用的apache的ant包,下载导入即可.由于过程比较简单,直接上代码. 代码可直接复制使用. 如果想在android上使用,记得要在AndroidManifest.xml里添加权限: <use ...

  2. 解决：“MediaPlayer error (1, -2147483648)”问题

    如果你使用VideoView播放过MP4视频,你可能碰到过类似下面的问题: MediaPlayer   error (1, -2147483648) 如果你查阅文档,会发现1其实代表MEDIA_ERR ...

  3. 通过开发MSBuild ,引发的注册表相关知识

    最近在做一个小项目,目的就是只需要点一个按钮,就把web程序发布到指定的服务器中.基本步骤就是 编译——>打包->复制包到远程服务器->解压缩.我想重点说一下解压缩,我们可以用win ...

  4. iOS中动画的简单使用

    iOS中的动画右两大类1.UIView的视图动画2.Layer的动画 UIView的动画也是基于Layer的动画动画的代码格式都很固定 1.UIView动画 一般方式[UIView beginAnim ...

  5. UI学习笔记---第四天

    事件处理 事件概述 UIEvent:事件,是由硬件捕捉的一个表示用户操作设备的对象 分三类:触摸事件\  晃动事件\ 远程控制事件 触摸事件:会包含1个到多个触摸点 实现触摸 UIView支持触摸事件 ...

  6. 260. Single Number III

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  7. 隐藏select最右侧的下拉三角图标的css样式

    -webkit-appearance:none; -moz-appearance:none; appearance:none;

  8. Hibernate--Enum类型的set集合映射到数据库（xml配置文件实现方式）

    使用enum 存储Permission的值 package demo; public enum Permission {    CREATE,DELETE,UPDATE;} Role与Permissi ...

  9. java加密与解密

    1.下载:UnlimitedJCEPolicy    主要:获取权限文件2.把解压后的      local_policy.jar      US_export_policy.jar   复制到 这个 ...

  10. Linux安全攻防笔记

    一.上传木马的过程 1.默认端口22弱口令暴力破解: 2.21端口或者3306端口弱口令暴力破解: 3.webshell进行shell反弹提权: 4.木马传入服务器的上面并且执行,通过木马的方式来控制 ...