jquery.validate.js自定义表单验证

$(document).ready(function() {//在下列位置输入页面加载的逻辑代码$("#inputForm").validate({rules: {seq: {range: [0,100]}},submitHandler : function(form) {loading(‘正在提交，请稍等...‘);form.submit();},errorContainer : "#messageBox",errorPlacement : function(error, element) {$("#messageBox").text("输入有误，请先更正。");if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {error.appendTo(element.parent().parent());} else {error.insertAfter(element);}}});});$.validator.setDefaults({submitHandler:function(form){form.submit();//提交时拦截}, ???errorPlacement: function(error, element) { ???????error.addClass(‘tooltips tooltips-inner arrow-left‘); ???????if (element.is(":radio")){ ???????error.appendTo(element.parent().parent()); ???????}else if (element.is(":checkbox")){ ???????error.appendTo(element.parent().parent()); ???}else{ ???error.insertAfter(element); ???} ???????var pos = $.extend({}, element.offset(), { ???????????width: element.outerWidth() ?????????, height: element.outerHeight() ?????????}), ?????????actualWidth = error.outerWidth(), ?????????actualHeight = error.outerHeight(); ???????if((pos.top - actualHeight)<0){actualHeight=0;pos.width+=10;}//如果输入框距离顶端为0情况把提示放右边 ???????if(element.parents(".blockPage").attr("class")=="blockUI blockMsg blockPage"){//如果是弹出框的，那么设置如下 ????????error.css({display:‘block‘,opacity:‘0.6‘ ,left:300,top:pos.top - $(document).scrollTop() - actualHeight - 100, "border-left": ‘0px‘}); ???????} ???????else if (element.is(":radio")){//类型为radio的显示如下 ???????error.css({display:‘block‘,opacity:‘0.6‘,top: pos.top - actualHeight, left: pos.left + pos.width / 2 }); ???????}else{//其他均为以下显示 ???????error.css({display:‘block‘,opacity:‘0.6‘,top: pos.top - actualHeight, left: pos.left + pos.width-10 }); ???} ???}});

input.error {border: 1px solid red !important;}label.error { ???padding-left: 16px; ???padding-bottom: 2px; ???font-weight: bold; ???color: red;}span.error { ???padding-left: 16px; ???padding-bottom: 2px; ???font-weight: bold; ???color: red;}label.checked {}.tooltips { ?????position: absolute; ?????z-index: 10200; ?????display: block; ?????visibility: visible; ?????padding: 5px; ?????font-size: 11px; ?????opacity: 0; ?????filter: alpha(opacity=0); ???} ?.tooltips-inner { ??max-width: 300px; ??padding: 0px 8px; ??color: #ffffff; ??text-align: center; ??text-decoration: none; ??background-color: #000000; ??-webkit-border-radius: 4px; ??-moz-border-radius: 4px; ??border-radius: 6px; } form input.error{ color:#F00; border: 1px solid #CE7979; background:#FFF7FA; ????}form label.error{ color:#F00; ????} ?.arrow-left{ ?border-bottom: 10px solid #000000; ?border-left: 10px solid #ffffff;}