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

转载 2016年08月28日 17:05:24

学习要点:

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视频培训视频教程下载

01.[jQuery EasyUI]第1章 jQuery EasyUI入门 02.[jQuery EasyUI]第2章 使用EasyUI 03.[jQuery EasyUI]第3章 Draggab...

jquery validate表单验证插件制作注册表单验证提交

jquery validate表单验证插件制作注册表单验证提交 --> $(document).ready(function () { ...

李炎恢 jquery PDF 完整版

  • 2017-09-21 18:44
  • 6.25MB
  • 下载

北风网 李炎恢老师全部视频教程下载地址大全

(1)啥都不说了【北风网 李炎恢老师】视频教程大全百度网盘下载地址: http://pan.baidu.com/share/home?uk=4278436023#category/type=0 ...

HTML5(李炎恢)学习笔记四 ------------- HTML5元素(中)

表格元素,音频和视频元素,全局属性和其他元素,超链接和路径
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)