表单中含有AJAX验证问题的异步解决方案
功能:验证码正确与否以及验证码不正确无法submit
HTML代码
<form onSubmit="return myCheck()" ...>
JavaScript代码
// ajax异步解决方案
$(document)
.ajaxStart(function(){
$("button:submit").addClass("log-in").attr("disabled", true);
})
.ajaxStop(function(){
$("button:submit").removeClass("log-in").attr("disabled", false);
});
// 验证码验证
var checkBool = false;
$('.verifyImg').blur(function(){
var data = {checkCode: this.value}
console.log(data);
$.ajax({
url: '{:U("user/check")}',
type: 'POST',
dataType: 'json',
data: data,
success: function(data){
if(data.status == 2){
$('.text-warning').text(data.msg);
$('#verifyImg').click();
checkBool = true;
}else{
$('.text-warning').text('');
}
}
})
})
// 表单项不能为空
function myCheck(){
var username = document.getElementById('inputusername');
var password = document.getElementById('inputpassword');
var verify = document.getElementById('inputverify');
if(username.value == ''){
$('.username_text').text('请输入用户名!');
return false;
}else if(password.value == ''){
$('.password_text').text('请输入密码!');
return false;
}else if(verify.value == ''){
$('.text-warning').text('请输入验证码!');
return false;
}else if(checkBool){
return false;
}else{
return true;
}
}
网友评论