jquery验证插件使用
1.插件引入
链接： https://pan.baidu.com/s/1GOF5vyBnBbsRTXrXEILVgA
提取码：63cb
<script src="libs/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="/libs/validate/jquery.validate.min.js"
th:src="@{/libs/validate/jquery.validate.min.js}"></script>
<script src="/libs/validate/messages_zh.min.js" th:src="@{/libs/validate/messages_zh.min.js}"></script>
2.html页面
## 部分代码：
<form id="signupForm">
<input type="text" name="loginName" placeholder="用户名" value="admin"/>
<input type="password" name="password" value="admin" placeholder="密码"/>
<button class="btn btn-success btn-block" id="btnSubmit" >登录</button>
</form>
3.js
$(function() {
validateRule();
});
//验证
function validateRule() {
$("#signupForm").validate({
// debug:true,//只验证不提交表单
rules: {
loginName: {
required: true
},
password: {
required: true
}
},
messages: {
loginName: {
required: "请输入您的用户名",
},
password: {
required: "请输入您的密码",
}
}
})
}
//通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交
$.validator.setDefaults({
submitHandler: function() {
login();
}
});
function login() {
var username = $("input[name='loginName']").val().trim();
var password = $("input[name='password']").val().trim();
$.ajax({
type: "post",
url: "/login",
data: {
"name": username,
"pwd": password
},
success: function(r) {
if (r.code == 200) {
location.href ='/index';
} else {
//登录失败
}
}
});
}
4.运行结果如图
