springmvc+jquery+ajax實現非同步使用者名稱驗證
阿新 • • 發佈:2019-01-22
$(function() {
var flag1 = false;
var flag2 = false;
$("#inputName")
.blur(
function() {
var inputName = $("#inputName").val();
if ($.trim(inputName) == ''
|| $.trim(inputName).length < 5
|| $.trim(inputName).length > 15) {
$("#userspan")
.html(
"<font color='red'>使用者名稱不能為空,且使用者名稱長度為5-15</font>");
flag1 = false ;
} else {
var inputPassword = $("#inputPassword").val();
var url = "${pageContext.request.contextPath}/validateUser";
var args = {
"name" : $.trim(inputName),
"password" : $.trim(inputPassword)
};
$
.post(
url,
args,
function(data) {
if ($.trim(data) == "error") {
$("#userspan")
.html(
"<font color='red'>此使用者名稱已存在</font>");
flag1 = false;
} else if ($.trim(data) == "success") {
$("#userspan").html(
"使用者名稱可用").css({
color : 'green'
});
flag1 = true;
}
})
}
});
$("#inputPassword").blur(
function() {
var inputPassword = $("#inputPassword").val();
if ($.trim(inputPassword) == "") {
$("#pswspan").html("<font color='red'>密碼不能為空</font>");
flag2 = false;
} else if ($.trim(inputPassword).length > 15
|| $.trim(inputPassword).length < 5) {
$("#pswspan").html("密碼長度必須為5-15").css({
color : "red"
});
flag2 = false;
} else {
$("#pswspan").html("密碼可用").css({
color : "green"
});
flag2 = true;
}
})
$("#formButton").click(function() {
if (flag1 && flag2) {
$("#form").submit();
}
return false;
})
});