夏日博客

A-A+

jquery表单验证之获得焦点提示

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

我们下面的这个例子就是当我们获得input焦点时就会显示一个让我们输入相关信息，如果正确就不显示，如果错误了提示相关信息，下面来看这个效果实现方法。

这几天一直在做一个表单验证的页面，为了达到友好界面，特意去抄了360buy的页面，模仿写了一个页面.

jquery表单验证之获得焦点提示,就是验证表单里面所信息都为必填,代码如下:

  1. //注册页面验证机制  
  2.  $("#username").focus(function(){ //用focus()表单，当光标在输入框的时候执行下面的代码  
  3.     $("#username_error").removeClass("error").html(" ");  
  4.     $("#username_succeed").removeClass("succeed");  
  5.     $(this).removeClass("highlight2")  
  6.     $("#username_error").addClass("focus").html("学号必须由11位数字组成。如：104084002xx");  
  7.     $(this).addClass("highlight1");  
  8.                     });  
  9. $("#username").blur(function(){ //用blur()表单，当光标离开输入框的时候执行下面的代码  
  10.     $value = $.trim( $(this).val() ); //去掉输入数据左右的空格  
  11.          if($value.length == 0 )  
  12.         {  
  13.                $("#username_error").addClass("error").html("学号不能为空");  
  14.            $(this).addClass("highlight2");  
  15.            return false;  
  16.         }  
  17.          else  
  18.         {  
  19.            $("#username_error").removeClass("focus").html(" ");  
  20.                $(this).removeClass("highlight1");  
  21.            if($.isNumeric($value))  
  22.                 {  
  23.                 if($value.length == 11)  
  24.                 {  
  25.                     $("#username_succeed").addClass("succeed");  
  26.                     $("#username_error").removeClass("error").html(" ");  
  27.                     $(this).removeClass("highlight2")  
  28.                     return true;  
  29.                 }  
  30.                     $("#username_error").addClass("error").html("学号必须为11位");  
  31.                     $(this).addClass("highlight2");  
  32.                       return false;  
  33.             }  
  34.                   $("#username_error").addClass("error").html("学号必须为数字");  
  35.                   $(this).addClass("highlight2");  
  36.                   return false;  
  37.            }  
  38.          });  

上面就是JQUERY部分代码,就进行了，对学号的现在和效果显示。下面是用到的样式的代码清单:

  1. .highlight1{  
  2.       border:1px solid #EFA100;  
  3.       outline:2px solid #FFDC97;  
  4.             }  
  5. .highlight2  
  6.            {  
  7.       border:1px solid #f00;  
  8.       outline:1px solid #FFC1C1;  
  9.       color:#f00;  
  10.            }  
  11. .focus{  
  12.      color:#999;  
  13.      line-height:22px;  
  14.      text-align:center;  
  15.       }  
  16. .succeed{  
  17.      background:url(images/pwdstrength.gif) no-repeat -105px 0;  
  18.         }  

也列举出部分HTML代码:

  1. <div>  
  2. <span><b>*</b>学号：</span>  
  3. <input type="text" id="username" name="userid" />  
  4. <label id="username_succeed"></label> //如果符合要求这里就添加SUCCEED样式。否则隐藏  
  5. <span class="clr"></span> //清除浮动  
  6.  <div id="username_error"></div> //如果不符合要求就现在focus样式。  
  7. </div>  

这样就完成了对输入学号字段的验证。效果友好,其他的输入框的验证都是依样画葫芦。没什么难点了。

原理：就是添加CLASS和移除CLASS。达到效果。

标签：

给我留言