一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2015-03-25 编辑:简简单单 来源:一聚教程网

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

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


就是验证表单里面所信息都为必填

 代码如下 复制代码

//注册页面验证机制
 $("#username").focus(function(){ //用focus()表单,当光标在输入框的时候执行下面的代码
    $("#username_error").removeClass("error").html(" ");
    $("#username_succeed").removeClass("succeed");
    $(this).removeClass("highlight2")
    $("#username_error").addClass("focus").html("学号必须由11位数字组成。如:104084002xx");
    $(this).addClass("highlight1");
                    });
$("#username").blur(function(){ //用blur()表单,当光标离开输入框的时候执行下面的代码
    $value = $.trim( $(this).val() ); //去掉输入数据左右的空格
         if($value.length == 0 )
        {
               $("#username_error").addClass("error").html("学号不能为空");
           $(this).addClass("highlight2");
           return false;
        }
         else
        {
           $("#username_error").removeClass("focus").html(" ");
               $(this).removeClass("highlight1");
           if($.isNumeric($value))
                {
                if($value.length == 11)
                {
                    $("#username_succeed").addClass("succeed");
                    $("#username_error").removeClass("error").html(" ");
                    $(this).removeClass("highlight2")
                    return true;
                }
                    $("#username_error").addClass("error").html("学号必须为11位");
                    $(this).addClass("highlight2");
                      return false;
            }
                  $("#username_error").addClass("error").html("学号必须为数字");
                  $(this).addClass("highlight2");
                  return false;
           }
         });

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

 代码如下 复制代码

.highlight1{
      border:1px solid #EFA100;
      outline:2px solid #FFDC97;
            }
.highlight2
           {
      border:1px solid #f00;
      outline:1px solid #FFC1C1;
      color:#f00;
           }
.focus{
     color:#999;
     line-height:22px;
     text-align:center;
      }
.succeed{
     background:url(images/pwdstrength.gif) no-repeat -105px 0;
        }

也列举出部分HTML代码

 

 代码如下 复制代码

*学号:

//如果符合要求这里就添加SUCCEED样式。否则隐藏
//清除浮动
 
//如果不符合要求就现在focus样式。

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

原理:

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

热门栏目