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

学习要点:

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,

         },

   },

});


阅读更多
想对作者说点什么? 我来说一句

李炎jQuery EasyUI讲义代码

2017年09月19日 40.29MB 下载

李炎恢在线课堂jQuery讲义(总)

2016年09月01日 4.47MB 下载

李炎jQuery视频教程

2014年11月15日 48B 下载

李炎jquery PDF 完整版

2017年10月14日 5.85MB 下载

李炎jQuery EasyUI视频教程

2018年01月29日 77B 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭