<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();
}
效果如下圖