表单验证 jquery.validate.js与poshytip集成
jquery.validate.js教程:http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html
poshytip 教程: http://vadikom.com/demos/poshytip/
注意 :
1:jquery.validate.js 版本1.8.1才会支持IE6、IE7。
2:且jquery不得超过1.6.1,不然IE6、IE7无法支持
主要代码:
$(document).ready(function(){
/**//* 设置默认属性 */
$.validator.setDefaults({
// focusInvalid:true,
onkeyup:false,
submitHandler: function(form) {
form.submit();
},
errorPlacement: function(error, element) {
// 与poshytip插件集成
var elem = new Object();
elem=$(element);
if (!error.is(':empty')) {
//右:x=right;y=center
//左:x=left;y=center
//上:x=inner-left
//下:x=center;y=bottom
var aX = "right";//默认右对起
if (elem.attr("positionX")) {
aX = elem.attr("positionX");
}
var aY = "center";
if (elem.attr("positionY")) {
aY = elem.attr("positionY");
}
var aClass="tip-yellowsimple";// 默认土豪金样式,其它样式可参考管网,头部需要响应的引用样式
if (elem.attr("positionClass")) {
aClass = elem.attr("positionClass");
}
var aTime=3000;//默认3秒消失
if (elem.attr("positionTime")) {
aTime = parseInt(elem.attr("positionTime"));
}
elem.poshytip('destroy');
elem.poshytip({
className: aClass,
content: error,
showOn: 'none',
alignTo: 'target',
alignX: aX,
alignY: aY,
offsetX: 5
});
elem.poshytip('show');
setTimeout(function(){
elem.poshytip('destroy');
}, aTime);
} else {
elem.poshytip('destroy');
}
// 右则显示
// error.appendTo(element.parent());
}
});
效果图: