Chinaunix首页 | 论坛 | 博客

stray82的ChinaUnix博客stray.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

stray82

  • 博客访问： 326377
  • 博文数量： 206
  • 博客积分： 1040
  • 博客等级： 少尉
  • 技术积分： 1756
  • 用 户 组： 普通用户
  • 注册时间： 2012-04-09 17:22
文章分类

全部博文（206）

文章存档

2015年（3）

2014年（147）

2013年（2）

2012年（54）

我的朋友
最近访客
推荐博文
jquery表单验证

分类： jQuery

2014-02-10 13:37:46


点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <link href="css/style.css" rel="stylesheet" type="text/css" />

  8. <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  9. <script type="text/javascript">
  10. //<![CDATA[
  11. $(function(){
  12.         //如果是必填的，则加红星标识.
  13.         $("form :input.required").each(function(){
  14.             var $required = $(" *"); //创建元素
  15.             $(this).parent().append($required); //然后将它追加到文档中
  16.         });
  17.          //文本框失去焦点后
  18.      $('form :input').blur(function(){
  19.              var $parent = $(this).parent();
  20.              $parent.find(".formtips").remove();
  21.              //验证用户名
  22.              if( $(this).is('#username') ){
  23.                     if( this.value=="" || this.value.length < 6 ){
  24.                      var errorMsg = '请输入至少6位的用户名.';
  25.                         $parent.append(''+errorMsg+'');
  26.                     }else{
  27.                      var okMsg = '输入正确.';
  28.                      $parent.append(''+okMsg+'');
  29.                     }
  30.              }
  31.              //验证邮件
  32.              if( $(this).is('#email') ){
  33.                 if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
  34.                       var errorMsg = '请输入正确的E-Mail地址.';
  35.                      $parent.append(''+errorMsg+'');
  36.                 }else{
  37.                       var okMsg = '输入正确.';
  38.                      $parent.append(''+okMsg+'');
  39.                 }
  40.              }
  41.         }).keyup(function(){
  42.          $(this).triggerHandler("blur");
  43.         }).focus(function(){
  44.           $(this).triggerHandler("blur");
  45.         });//end blur

  47.         
  48.         //提交，最终验证。
  49.          $('#send').click(function(){
  50.                 $("form :input.required").trigger('blur');
  51.                 var numError = $('form .onError').length;
  52.                 if(numError){
  53.                     return false;
  54.                 }
  55.                 alert("注册成功,密码已发到你的邮箱,请查收.");
  56.          });

  58.         //重置
  59.          $('#res').click(function(){
  60.                 $(".formtips").remove();
  61.          });
  62. })
  63. //]]>
  64. </script>
  65. </head>
  66. <body>

  68. <form method="post" action="">
  69.     <div class="int">
  70.         <label for="username">用户名:</label>
  71.         <input type="text" id="username" class="required" />
  72.     </div>
  73.     <div class="int">
  74.         <label for="email">邮箱:</label>
  75.         <input type="text" id="email" class="required" />
  76.     </div>
  77.     <div class="int">
  78.         <label for="personinfo">个人资料:</label>
  79.         <input type="text" id="personinfo" />
  80.     </div>
  81.     <div class="sub">
  82.         <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
  83.     </div>
  84. </form>

  86. </body>
  87. </html>

阅读(189) | 评论(0) | 转发(0) |
0

上一篇：jquery初步记录

下一篇：jquery选项卡

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6