jquery-validation - 04 -错误样式

最新推荐文章于 2021-06-16 01:35:45 发布

yuki、

最新推荐文章于 2021-06-16 01:35:45 发布

阅读量392

点赞数

分类专栏： # jQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/sinat_34003720/article/details/114493039

版权

jQuery 专栏收录该内容

5 篇文章

订阅专栏

这篇博客详细介绍了如何在jQuery Validation插件中自定义错误样式，包括统一显示错误信息，自定义错误位置，以及设置成功回调来改变验证通过后的元素样式。文章通过实例展示了错误样式概述、自定义错误样式的方法，以及如何调整错误和成功的显示位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery-validation支持自定义错误样式，包括如下

自定义错误样式
统一存放错误
定义错误位置
定义验证通过的样式

🌹 jquery validation－错误样式概述

在验证出现错误后，jquery-validation会做如下操作

如果有errorContainer，在errorCotainer中显示错误(统一显示)
如果没有errorContainer,在input后面添加errorElement，样式是errorClass

默认值如下

规则	描述	默认值
errorClass	错误类	error
errorElement	错误元素	label
errorContainer	容器，同一显示错误信息	无
errorlabelcontainer	用于统一显示错误信息	无
wrapper	包裹每条错误	无

🌻 自定义错误样式

只需要提供label.error、input.error和.error就可以

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;
}

🌼 统一显示错误

给jQuery.validator.setDefault()提供errorContainer、errorlabelContainer、wrapper。

$.validator.setDefaults({
    // 一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能
    errorContainer: "div.error",
    errorLabelContainer: $("#signupForm div.error"),
    wrapper: "li"
});

🌷 自定义错误位置

设置jQuery.validator.setDefault()的errorPlacement回调就可以

 $.validator.setDefaults({
     // 更改错误位置
     errorPlacement: function(error, element) {
         error.appendTo(element.parent());
     }
 });

🌾成功回调 - 设置成功样式

设置jQuery.validator.setDefault()的success回调。

当验证成功，执行success回调。
在回调中，设置给label设置successClass和successContent就可以

1️⃣ 设置success回调

$.validator.setDefaults({
	// 定义成功样式
	success: function(label) {
		label.html("符合规则").addClass("checked");
	}
});

2️⃣ 设置成功样式

label.checked {
    color: #1eaec9;
}