jQuery Validate校验
概念：
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。
理解：
该校验方法作用于表单，能够简单快速设置校验规则，同时更好编写提示信息。
所需要的js：
<script type="text/javascript" th:src="@{/js/jquery.validate.min.js}" ></script>
<script type="text/javascript" th:src="@{/js/additional-methods-common.js}" ></script>
<script th:src="@{/js/blog-validate.js}" type="text/javascript" charset="utf-8"></script>
html代码：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>login</title>
<script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.validate.min.js}" ></script>
<script type="text/javascript" th:src="@{/js/additional-methods-common.js}" ></script>
<script th:src="@{/js/blog-validate.js}" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" th:src="@{/css/bootstrap.min.css}">
<link rel="stylesheet" type="text/css" th:src="@{/css/bootstrap.css}">
</head>
<body>
<form class="am-form am-form-horizontal yf-form-tips add-form">
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">用户名: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="text" id="" name="addFormName" placeholder="请输入您的用户名" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">密码: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="password" id="password1" name="addFormPass1" placeholder="请输入您的密码" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">确认密码: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="password" id="" name="addFormPass2" placeholder="请再次输入您的密码" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<div class="am-u-sm-offset-2 yf-pl10">
<button type="submit" class="am-btn am-btn-primary" onclick="submitInfo()">提交</button>
</div>
</div>
</form>
</body>
</html>jquery:
//表单验证规则
var formValid = $(".add-form").validate({
rules: {
"addFormName":{
"required":true, //必填字段
"minlength":2
},
"addFormPass1":{
"required":true
},
"addFormPass2":{
"required":true,
"equalTo": "#password1" //输入值必须和 #password1 相同
},
},
messages: {
"addFormName":{
"required":"用户名不能为空哦",
"minlength":"用户名不能太短哦"
},
"addFormPass1":{
"required":"密码不能为空哦"
},
"addFormPass2":{
"required":"确认密码不能为空哦",
"equalTo":"两次输入的密码不一致哦"
},
},
errorPlacement:function(error,element) {
error.appendTo(element.siblings(".yf-error-tip"));
}
});
//提交前开始验证
var submitInfo = function(){
if($('.add-form').valid()){
alert('恭喜你，验证通过了！');
};
}