详解jQuery的表单验证插件–Validation

2020-05-24 21:44:50易采站长站整理

form.submit();
}
});

只验证不提交表单


$(function(){
$("#commentForm").validate({
debug:true;
});
});

错误提示信息设置

1、错误信息位置设置

errorPlacement方法是设置错误信息显示在哪,默认值是在验证元素的后面


errorPlacement: function(error, element) {
error.appendTo(element.parent());
}

errorClass 是设置错误信息的样式,后跟css类名

errorElement 是设置用什么标签包住错误信息,默认值是<label>

errorLabelContainer 是设置将所有的错误信息包在一个地方

wrapper 是设置用什么标签再把上边的 errorELement 包起来

例如:


errorPlacement: function(error,element){
$(element).closest('form').find('label[for="'+ element.attr("id") +'"]').append(error);
},

是将错误提示信息显示在验证的信息前面

效果:

例如:


errorElement: 'span',
errorClass: 'commentError',
errorLabelContainer: $('form div.error'),
wrapper: 'li',

是将每个提示信息用<span>标签包起来,给他们添加css名为 .commentError 的样式, 并把他们都包再一个class为 error 的div里,在用<li>把每个提示信息包起来  

效果:

2、错误信息样式设置

有两种方式可以修改提示信息的样式

第一种就是采用下载Validation时自带的样式文件

<link href="demo/css/screen.css" type="text/css" rel="stylesheet" />

 第二种方式就是自己定义样式(当然也可以修改自带的css文件)

例如添加这样的样式:


input.error { border: 1px solid red; }
label.error {
background:url("demo/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("demo/images/checked.gif") no-repeat 0px 0px;
}

效果: