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李炎恢——16,17基础事件

学习要点: 1.绑定事件 2.简写事件 3.复合事件 javaScript有一个非常重要的功能,就是事件驱动。当页面完全加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发。jquery为开...

Jquery李炎恢——15表单选择器

学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为HTML中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以使用之前的常规选择器或过滤器,也可以使用Jquery为表单专门提...

Jquery李炎恢——47,48,49验证插件【13】【14】【15】

学习要点: 1.使用validate.js插件 2.默认验证规则 3.validate()方法和选项 4.validate.js其他功能 验证插件(validate.js),是一款验证常规表单数据...

李炎恢jQuery笔记7表单选择器

val(); //选择type 为password 的字段 $('input[name=user]').val(); //选择name 为user 的字段 那么对于id 和类(class)用法比较...

Jquery李炎恢——18,19事件对象

学习要点: 1.事件对象 2.冒泡和默认行为 javaScript在事件处理函数中默认传递了event对象,也就是事件对象。但由于浏览器的兼容性,开发者总是会做兼容性方面的处理。jquery在封装...

Jquery李炎恢——23,24,25动画效果

学习要点: 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 在以前很长一段时间里,网页上的各种特效还需要采用flash在进行。...

Jquery李炎恢——39按钮UI【5】

学习要点: 1.使用button按钮 2.修改button样式 3.button()方法的属性 4.butto("action",param) 5.单选、复选按钮 按钮可以给生硬的原生按钮或者文本...

Jquery李炎恢——29,30Ajax进阶

学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON和JSONP 在Ajax课程中,我们了解了最基本的异步处理方式。本章,我们将了解一下Ajax的一些全局请求事件、跨域处理和其...

Jquery李炎恢——26,27,28Ajax

学习要点: 1.Ajax概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax()方法 6.表单序列化 Ajax...

Jquery李炎恢——31,32工具函数

学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于jquery对象,针对jquery对象本身定义的方法,即全局性的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery李炎恢——50验证注册表单【16】
举报原因:
原因补充:

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