我正在检查数据库中重复的电子邮件。首先,我检查了有效的电子邮件,然后检查了电子邮件长度,然后我检查了电子邮件从数据库使用ajax。因此,返回true或返回false在ajax代码中不起作用。其他验证是可以的,但检查重复的电子邮件不起作用。另外,ajax响应是可以的。
这里是我的js文件-
$(document).ready(function(){
var form = $("#form");
var registeremail = $("#registeremail");
var emailInfo = $("#emailInfo");
registeremail.blur(validateEmail);
registeremail.keyup(validateEmail);
form.submit(function(){
if( validateEmail() )
return true;
else
return false;
});
function validateEmail(){
//testing regular expression
var a = $("#registeremail").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
//if it's valid email
if(filter.test(a)){
registeremail.removeClass("error");
emailInfo.text("");
emailInfo.removeClass("error");
if(registeremail.val().length < 8){
registeremail.addClass("error");
emailInfo.text("Min 8 letters required.");
emailInfo.addClass("error");
return false;
}
else if(registeremail.val().length > 60){
registeremail.addClass("error");
emailInfo.text("Max 60 letters required.");
emailInfo.addClass("error");
return false;
}
else
{
$.ajax({
url: "home/CheckEmail",
data: {
email: a
},
success: function(ret)
{
if(ret=='1')
{
registeremail.addClass("error");
emailInfo.text("Email already exist.");
emailInfo.addClass("error");
return false;
}
else if(ret != '1')
{
registeremail.removeClass("error");
emailInfo.text("");
emailInfo.removeClass("error");
//document.forms["form"].submit();
return true;
}
}
});
}
}
//if it's NOT valid
else{
registeremail.addClass("error");
emailInfo.text("Valid e-mail please");
emailInfo.addClass("error");
return false;
}
}
});
默认情况下,jQuery的ajax调用将异步运行。
所以,当你做一个ajax调用,成功或错误回调不会立即运行。
为了使上面的代码可行,你可以在ajax调用参数中添加'async: false'。
但是进行同步ajax调用将冻结UI,直到它完成。如果后端api调用需要很长时间才能完成,那么这将成为一个show-stopper。
理想的方式是
- 显示一些处理/加载图标
- 发送AJAX调用
- 收到响应后隐藏处理/加载图标
- 根据响应显示错误/成功消息。