<form id="signupForm">
<h3 class="text-center">用户登录</h3>
<p class="m-t-md text-center">欢迎登录</p>
<input id="username" type="text" name="username" class="form-control uname" placeholder="请输入电话号码"/>
<!-- th:value="${username}" -->
<input id="password" type="password" name="password" class="form-control pword m-b"
placeholder="请输入电话号码"/>
<input id="login" type="button" onclick="loginUser()" value="登录" class="btn btn-login btn-block"/>
<div class="row">
<div class="col-xs-6 pull_left">
<div class="form-group">
<input class="form-control" type="tel" name="verify" id="verify" placeholder="请输入验证码"maxlength="4">
</div>
</div>
<div class="col-xs-6 pull_left">
<a href="javascript:void(0);" rel="external nofollow" title="点击更换验证码">
<img style="margin-top: 12px;" id="imgVerify" src="" alt="更换验证码" height="36" width="100%" onclick="getVerify(this);">
</a>
</div>
</div>
<div id="msg" class="info_msg"></div>
</form>
<script type="text/javascript">
$("#imgVerify").click();
function loginUser() {
validateRule();
$("body").keydown(keyDownLogon);
var fromData = {
"username": $("#username").val(),
"password": $("#password").val(),
"verify": $("#verify").val()
};
$.ajax({
type: "POST",
url: "/login",
data: fromData,
success: function (r) {
console.log("dasf")
if (r.code === 0) {
window.location.href = "/user/index";
} else {
document.getElementById("msg").innerHTML = r.msg;
}
},
});
}
function keyDownLogon() {
if (event.keyCode === "13") {
$("#login").trigger('click');
}
}
function validateRule() {
var icon = "<i class='fa fa-times-circle'></i> ";
$("#signupForm").validate({
rules: {
username: {
required: true
},
password: {
required: true
},
verify: {
required: true
}
},
messages: {
username: {
required: icon + "请输入您的账号",
},
password: {
required: icon + "请输入您的密码",
},
verify: {
required: icon + "请输入验证码",
}
}
})
}
function getVerify(obj) {
obj.src = "/getVerify?" + Math.random();
}
效果如下图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200410160049698.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1FfUTEwNDkyNg==,size_16,color_FFFFFF,t_70)