jquery validation 提示信息美化
*********************
示例
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/jquery/jquery-3.5.1.min.js"></script>
<script src="/jquery/jquery.validate.min.js"></script>
<script src="/jquery/additional-methods.min.js"></script>
</head>
<style type="text/css">
em.error {
padding-left: 20px;
background: greenyellow url("/images/4.gif") no-repeat 2px 0;
}
em.success {
padding-left: 20px;
background: orange url("/images/0.gif") no-repeat 2px 0;
}
</style>
<script>
$(function () {
$("form").validate({
rules: {
id: {
required: true
},
name: {
required: true,
minlength: 2
},
age: {
required: true,
digits: true,
min: 10
}
},
messages: {
id: {
required: "请输入用户 id"
},
name: {
required: "请输入用户姓名",
minlength: "用户姓名长度最小为:2"
},
age: {
required: "请输入用户年龄",
digits: "用户年龄为整数",
min: "用户年龄最小为:10"
}
},
errorElement: "em", //在css样式表中查找em
success: "success" //验证成功,将success样式添加到em上,即em.success
})
})
</script>
<body>
<form th:align="center">
id: <input type="text" name="id"><br>
name: <input type="text" name="name"><br>
age: <input type="text" name="age"><br>
<button id="btn">提交</button>
</form>
</body>
</html>
使用测试