分类:前端

一、官网地址

http://bassistance.de/jquery-plugins/jquery-plugin-validation

二、导入包

用的时候需要先导入jQuery包。

然后导入jquery.validate包,这个包在解压后的dist文件夹下,一般选择jquery.validate.min.js

<script src=”js/jquery.validate.min.js” type=”text/javascript”></script>

三、内置验证规则用法

(1)required:true                必输字段
(2)remote:”check.php”      使用ajax方法调用check.php验证输入值
(3)email:true                    必须输入正确格式的电子邮件
(4)url:true                        必须输入正确格式的网址
(5)date:true                      必须输入正确格式的日期 日期校验ie6出错,慎用
(6)dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true                 必须输入合法的数字(负数,小数)
(8)digits:true                    必须输入整数
(9)creditcard:                   必须输入合法的信用卡号
(10)equalTo:”#field”          输入值必须和#field相同
(11)accept:                       输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5               输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10              输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10]      输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
(15)range:[5,10]               输入值必须介于 5 和 10 之间
(16)max:5                        输入值不能大于5
(17)min:10                       输入值不能小于10

四、导入默认中文提示

在localization文件夹下有国际化的包。

<script src=”js/messages_cn.js” type=”text/javascript”></script>

五、将校验规则写到JS中的插件使用方式

 

$().ready(function() {

$(“#signupForm”).validate({

rules: {

firstname: “required”,

email: {

required: true,

email: true

},

password: {

required: true,

minlength: 5

},

confirm_password: {

required: true,

minlength: 5,

equalTo: “#password”

}

},

messages: {

firstname: “请输入姓名”,

email: {

required: “请输入Email地址”,

email: “请输入正确的email地址”

},

password: {

required: “请输入密码”,

minlength: jQuery.format(“密码不能小于{0}个字 符”)

},

confirm_password: {

required: “请输入确认密码”,

minlength: “确认密码不能小于5个字符”,

equalTo: “两次输入密码不一致不一致”

}

}

});

});

这里是HTML表单:

<form id=”signupForm” method=”get” action=””>

<p>

<label for=”firstname”>Firstname</label>

<input id=”firstname” name=”firstname” />

</p>

<p>

<label for=”email”>E-Mail</label>

<input id=”email” name=”email” />

</p>

<p>

<label for=”password”>Password</label>

<input id=”password” name=”password” type=”password” />

</p>

<p>

<label for=”confirm_password”>确认密码</label>

<input id=”confirm_password” name=”confirm_password” type=”password” />

</p>

<p>

<input class=”submit” type=”submit” value=”Submit”/>

</p>

</form>

required:true 必须有值
required:”#aa:checked”表达式的值为真,则需要验证
required:function(){}返回为真,表时需要验证
后边两种常用于,表单中需要同时填或不填的元素

 六、自定义验证规则
$.validator.addMethod(“验证规则名称”,function(value,element,params){
//验证内容},”验证不通过时的提示信息”)

addMethod的第一个参数,就是添加的验证方法的名子,这时是af

addMethod的第三个参数,就是自定义的错误提示,这里的提示为:”必须是一个字母,且a-f”

addMethod的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法

addMethod的第二个参数则个函数,接收三个参数(value,element,param)
value是元素的值,element是元素本身
param是参数,我们可以用addMethod来添加除built-in Validation

例如:

$.validator.addMethod(“af”,function(value,element,params){

if(value.length>1){

    return false;

   }

   if(value>=params[0]
&& value<=params[1]){

    return true;

   }else{

    return false;

   }

},”必须是一个字母,且a-f”);

用的时候,比如有个表单字段的id=”username”,则在rules中写

username:{

   af:[“a”,”f”]

}

如果只有一个参数,直接写,如果af:”a”,那么a就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开

七、覆盖默认的验证不通过消息

//覆盖默认的错误提示信息
messages:{
’employee.name’:{
required: “员工姓名不能为空”,
maxlength: “员工姓名最多255位字符”
},
’employee.ecode’:{
required: “员工编号不能为空”,
maxlength: “员工编号最多255位字符”
},
}

八、自定义错误提示显示位置

//自定义错误信息显示位置
errorPlacement:function(error, element){
element.parent().parent().addClass(“error”);
element.after(error);
}

九、其他选项

$(“#addEmployee”).validate({
//打开校验插件的调试方式,只验证不提交表单
//debug: true,
// 使用”div”标签标记错误, 默认:”label”
errorElement :”span”,
// 使用”li”标签再把上边的errorELement包起来
//wrapper:”li”,
// 错误提示的css类名”error”
errorClass :”help-inline”,
// 是否在提交时验证,默认:true
//onsubmit:true,
// 是否在获取焦点时验证,默认:true
onfocusout:false,
// 是否在敲击键盘时验证,默认:true
onkeyup :false,
// 是否在鼠标点击时验证(一般验证checkbox,radiobox)
onclick:false,
// 当未通过验证的元素获得焦点时,移除错误提示,此处存在BUG,必须为false
focusCleanup:false,

 

参考资料:

http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html

 

前端

1、jQuery

这个就不用说了吧,Web开发必备。互联网上有非常非常多的基于jQuery的第三方插件。

官方还有jQuery UI等。

官网:jquery.com

2、jQuery MiniUI

快速开发WEB界面,貌似是国内的产品,做的还不错。貌似使用要收费,蛋疼。

官网:http://www.miniui.com/

3、ExtJS

大名鼎鼎了

官网:ext.net/

中文网站:http://extjs.org.cn/

4、prototype

prototype.js 是Sam Stephenson写的一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国内外有多个基于此类库实现的效果库,也做得很棒。

5、YUI

Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证

6、Dojo

Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。Core提供Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤,基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件:DateGrid,charts,离线应用,跨浏览器矢量绘图等。

7、QUI

国产UI解决方案。

网站:http://www.quickui.net

8、Bootstrap

大名鼎鼎的Bootstrap。完整的UI解决方案。

网站:http://www.bootcss.com/

9、sitemesh

Sitemesh是由一个基于Web页面布局、装饰及与现存Web应用整合的框架。它能帮助我们在由大量页面工程的项目中创建一致的页面布局和外观,如一致的导航条、一致的banner、一致的版权等。

10、operamasks-ui

移动端:

1、sencha touch

更多:

http://www.oschina.net/p/nej/similar_projects#list

前端

ul列表对象是容易在IE与Mozilla/Firefox之中发生问题的对象,主要原因源自不同的浏览器对ul对象的默认边距值(margin和padding)设置造成的,在了解这个问题之前,先来看一下问题的起因,我们首先看看xhtml与CSS代码。

前端

一、JavaScript 事件冒泡简介及应用

1、什么是事件冒泡

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

前端

前端

前端

许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800*600尺寸及1024*768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了,下面我们就网页设计的标准尺寸进行讲解.

前端

if(userName == ""){ 
    msg += "对不起,用户名不能为空!\r";

if(passWord == ""){ 
    msg += "对不起,密码不能为空!\r";

else if(repassWord == ""){ 
    msg += "对不起,重复密码不能为空!\r"; 

else if(passWord != repassWord){ 
    msg += "对不起,密码与重复密码不匹配!\r";

else if(!/[a-zA-Z0-9]{6,16}/.test(passWord)) 

    msg += "密码只能是6-16位数字与字母的组合!\r"; 

前端

本周用了很多时间在这上面,终于搞出来了一个中文的。

jQuery插件pagination参数使用说明

使用pagination的形式如下:

$(“#News-Pagination”).pagination(122, {

items_per_page:20,

callback:loadContents

});

前端

用CSS如何使DIV层水平居中

这两天开始对网志进行大刀阔斧的页面更改.

今天碰到个很棘手的问题,DIV本身没有定义自己居中的属性,

网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.

可是事实上这样的方法科学吗?

经过网络搜索和亲自实验得出以下结论:

正确的也是对页面构造没有影响的设置如下:

对需要水平居中的DIV层添加以下属性:

margin-left: auto;

margin-right: auto;

经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!

郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.

问题到底出在哪里呢?

感谢网友乐天无用帮忙找出了这个邪门问题的原因.

原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.

问题并不在CSS而在XHTML网页本身.

需要加上这样的代码才能使得上述设置有效果:

test content

说明:

vertical-align:middle;表示行内垂直居中,我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字,就垂直居中了。

CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中

另一方法:

注:x为width变量,y为height变量

前端