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笔记3

jQuery 最核心的组成部分就是:选择器引擎。它继承了CSS 的语法,可以对DOM 元 素的标签名、属性名、状态等进行快速准确的选择,并且不必担心浏览器的兼容性。jQuery 选择器实现了CSS...
  • hunhunlan
  • hunhunlan
  • 2013年11月21日 18:33
  • 1094

Jquery李炎恢——35概述及jQuery UI[1]

sfsr
  • pugongyingyangyue
  • pugongyingyangyue
  • 2016年08月21日 12:33
  • 250

李炎恢教程/妙味课堂javaScript/jQuery/js/Ajax全套视频

使用JavaScript编写一个Base.js基础库,然后通过这个基础库+自行开发的插件,最终完成一个精简型博客主题的前端功能。 这是一个问答系统精简版,高仿了一些知乎网站的部分功能。通过这个小型项...
  • bfboys
  • bfboys
  • 2017年01月13日 20:26
  • 2128

李炎恢老师HTML5+CSS3教程与课件代码 下载

课程目录:     01.[HTML5第一季] 第1章 HTML5概述.zip     02.[HTML5第一季] 第2章 基本格式.zip     03.[HTML5第一季] 第3章 文本元素...
  • asb_b_1
  • asb_b_1
  • 2016年09月24日 13:50
  • 4647

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

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

51CTO 李炎恢老师jQuery EasyUI视频教程

JQuery EasyUI视频
  • sweet0112
  • sweet0112
  • 2015年05月15日 14:05
  • 526

Jquery李炎恢——51Ajax表单插件【17】

学习要点: 1.核心方法 2.option参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验。而这款form.js表单的Ajax提交插件将解决这个...
  • pugongyingyangyue
  • pugongyingyangyue
  • 2016年08月28日 19:25
  • 224

李炎恢老师PHP第三季视频课程(设计模式+MVC模式+SMARTY+在线商城)

1.PHP第三季中的设计模式,有些设计模式相似,但又有点复杂。 解决方案:在Web系统中用不到那么多模式,基础课程中,如果有听不懂的设计模式,直接放弃即可,继续往后学,无伤大雅。 2.PHP第三季...
  • lywuming
  • lywuming
  • 2017年01月06日 08:50
  • 1325

自己整理的几个免费的李炎恢php实战开发教程

自己整理的几个免费的李炎恢php实战开发教程 实战:李炎恢Lamp快速建站http://edu.ibeifeng.com/view-index-id-215.html 李炎恢老师Smarty专题h...
  • beifangbubai1
  • beifangbubai1
  • 2014年07月09日 14:39
  • 544

李炎恢JS AJAX笔记

第33章Ajax 学习要点: 1.XMLHttpRequest 2.GET 与POST 3.封装Ajax 主讲教师:李炎恢 官方网站:http://www.yc60.com 合作网站:http://w...
  • hunhunlan
  • hunhunlan
  • 2013年12月08日 18:54
  • 1790
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery李炎恢——50验证注册表单【16】
举报原因:
原因补充:

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