夏日博客

A-A+

基于jQuery验证表单用户名密码实现程序

2016年01月21日 前端设计 暂无评论 阅读 7 views 次

本文章是基于jQuery验证表单用户名密码效果，有需要的朋友可参考一下。

要求:

(1) 星号为必填项目，要求：用户名6-18个字符；邮箱符合邮箱格式串。用户名不小于6位，邮箱地址要正确的格式。

(2) 在输入框输入信息即时提示录入的要求信息，当不符合要求时即时显示错误信息。

(3) 验证通过后用alert显示结果。

css代码:

  1. <style type="text/css">  
  2.   
  3.     body  
  4.   
  5.     {  
  6.   
  7.         font-size: 12px;  
  8.   
  9.     }  
  10.   
  11.     form div  
  12.   
  13.     {  
  14.   
  15.         margin: 5px 0;  
  16.   
  17.     }  
  18.   
  19.     .intlabel  
  20.   
  21.     {  
  22.   
  23.         float: left;  
  24.   
  25.         width: 100px;  
  26.   
  27.         text-align: rightright;  
  28.   
  29.     }  
  30.   
  31.     .intinput  
  32.   
  33.     {  
  34.   
  35.         border: 1px solid;  
  36.   
  37.     }  
  38.   
  39.     .sub  
  40.   
  41.     {  
  42.   
  43.         padding-left: 100px;  
  44.   
  45.     }  
  46.   
  47.     .sub input  
  48.   
  49.     {  
  50.   
  51.         margin-right: 10px;  
  52.   
  53.     }  
  54.   
  55.     .formtips  
  56.   
  57.     {  
  58.   
  59.         width: 200px;  
  60.   
  61.         margin: 2px;  
  62.   
  63.         padding: 2px;  
  64.   
  65.     }  
  66.   
  67.     .onError  
  68.   
  69.     {  
  70.   
  71.         background: #FFE0E9 url(../img/NO.gif) no-repeat;  
  72.   
  73.         padding-left: 25px;  
  74.   
  75.     }  
  76.   
  77.     .onSuccess  
  78.   
  79.     {  
  80.   
  81.         background: #E9FBEB url(../img/OK.gif) no-repeat;  
  82.   
  83.         padding-left: 25px;  
  84.   
  85.     }  
  86.   
  87.     .high  
  88.   
  89.     {  
  90.   
  91.         color: red;  
  92.   
  93.     }  
  94.   
  95. </style>   

表单,代码如下:

  1. <form method="post" action="">  
  2.    
  3. <div class="int">  
  4.    
  5.     <label>  
  6.    
  7.         用户名 :</label>  
  8.    
  9.     <input type="text" id="username" class="required" />  
  10.    
  11. </div>  
  12.    
  13. <div class="int">  
  14.    
  15.     <label>  
  16.    
  17.         邮&nbsp; 箱 :</label>  
  18.    
  19.     <input type="text" id="email" class="required" />  
  20.    
  21. </div>  
  22.    
  23. <div class="sub">  
  24.    
  25.     <input type="submit" value=" 提交 " id="send" />  
  26.    
  27.     <input type="reset" id="res" />  
  28.    
  29. </div>  
  30.    
  31. </form>  

jQuery代码如下:

  1. <script type="text/javascript">  
  2.    
  3.     $(document).ready(function() {  
  4.   
  5.         $(":input.required").each(function() {  
  6.    
  7.             var $required = $("<strong class='high'> *</strong>");  
  8.    
  9.             $(this).parent().append($required);  
  10.    
  11.         });  
  12.   
  13.         $(':input').blur(function() {  
  14.    
  15.         var $parent = $(this).parent();   
  16.    
  17.             $parent.find(".formtips").remove();  
  18.    
  19.             if ($(this).is('#username')) {  
  20.    
  21.                 if (this.value == "" || this.value.length < 6) {  
  22.    
  23.                     var errorMsg = ' 请输入至少 6 位的用户名 .';  
  24.    
  25.                     $parent.append('<span class="formtips onError">' + errorMsg + '</span>');  
  26.    
  27.                 }  
  28.    
  29.                 else {  
  30.    
  31.                     var okMsg = ' 输入正确 .'; $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');  
  32.    
  33.                 }  
  34.    
  35.             };  
  36.    
  37.             if ($(this).is('#email')) {  
  38.    
  39.                 if (this.value == "" || (this.value != "" && !/.+@.+.[a-zA-Z]{2,4}$/.test(this.value))) {  
  40.    
  41.                     var errorMsg = ' 请输入正确的 E-Mail 地址 .';  
  42.    
  43.                     $parent.append('<span class="formtips onError">' + errorMsg + '</span>');  
  44.    
  45.                 }  
  46.    
  47.                 else { var okMsg = ' 输入正确 .'; $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>'); }  
  48.    
  49.             }  
  50.    
  51.         });  
  52.    
  53.         $(':input').keyup(function() { $(this).triggerHandler("blur"); });  
  54.    
  55.         $(':input').focus(function(){  $(this).triggerHandler("blur"); });  
  56.    
  57.         $('#send').click(function() {  
  58.    
  59.             $(":input.required").trigger('blur'); var numError = $('form .onError').length;  
  60.    
  61.             if (numError > 0) {  
  62.    
  63.             alert("请按要求填写表单");  
  64.    
  65.                 return false;  
  66.    
  67.             } alert(" 注册成功 , 密码已发到你的邮箱 , 请查收 .");  
  68.         });  
  69.    
  70.         $('#res').click(function() { $(".formtips").remove(); });  
  71.   
  72.     });  
  73.    
  74. </script>  
标签：

给我留言