关闭

Jquery李炎恢——50验证注册表单【16】

59人阅读 评论(0) 收藏 举报

学习要点:

1.html部分

2.css部分

3.jQuery部分


本节课,将使用validate.js验证插件功能,完成表单注册验证的功能。


一、HTML部分

html部分不需要更改太多,只要加个存放错误提示的列表标签即可。

<ol class="reg_error"></ol>


二、css部分

css部分主要是成功后引入一张小图标,还有错误列表样式。

#reg p .start{

    color:maroon;

}


#reg p .success{

   display:inline-block;

   width:28px;

   background:url(../img/reg_succ.png)  no-repeat;

}


#reg ol{

   margin:0;

   padding:0 0 0 20px;

}


#reg ol li{

  color:maroon;

}


三、jQuery部分

jQuery部分很常规,基本使用了validate.js的核心功能。

$("#reg").dialog({

  autoOpen:false,

  modal:true,

  resizable:false,

  width:320,

  height:340,

  buttons:{

    "提交":function(){

         $(this).submit();

     }

  },

}).buttonset().validate({

   submitHandler:function(form){

      alert("验证完成,准备提交!");

   },

   showErrors:function(errorMap,errorList){

       var errors=this.numberOfInvalids();

       if(errors>0){

              $("#reg").dialog("option","height",20*errors+320);

       }else{

              $("#reg").dialog("option","height",340);

       }

       this.defaultShowErrors();

   },

   highlight:function(element, errorClass){

       $(element).css("border","1px solid #630");

   },

   unhighlight:function(element, errorClass){

       $(element).css("border","1px solid #ccc");

       $(element).parent().find("span").html("&nbsp;").addClass("success");

   },

   errorLabelContainer:"ol.reg_error",

   wrapper:"li",

   rules:{

         user:{

            required:true,

            minlength:2,

         },

         pass:{

            required:true,

            minlength:6,

         },

         email:{

            required:true,

            email:true,

         },

         date:{

           required:true,

         },

   },

   message:{

         user:{

            required:"账号不得为空!",

            minlength:jQuery.format("账号不得小于{0}位!"),

         },

         pass:{

            required:"密码不得为空!",

            minlength:jQuery.format("密码不得小于{0}位!"),

         },

         email:{

            required:"邮箱不得为空!",

            email:"请输入正确的邮箱格式!",

         },

         date:{

            date:true,

         },

   },

});


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6261次
    • 积分:287
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:56篇
    • 译文:0篇
    • 评论:0条
    文章分类