我设置了一个简单的表单，并使用ajax+jquery来检查有效的用户名（在数据库中不存在）和电子邮件地址（有效的格式，在数据库中也不存在），如下
<body>
<div>
<h5> Sign Up </h5>
<hr />
<div>
Username:<input type="text" size="32" name="membername" id="username"><div id="usernameStatus"></div><br />
Email:<input type="text" size="32" name="memberemail" id="memberemail"><div id="emailStatus"></div><br/>
Password:<input type="password" size="32" name="memberpwd"><br />
<button id="signup" disabled="true">Sign Up</button>
</div>
<script>
function IsEmailValidAndNew()
{
var pattern = new RegExp(/^(("['w-+'s]+")|(['w-+]+(?:'.['w-+]+)*)|("['w-+'s]+")(['w-+]+(?:'.['w-+]+)*))(@((?:['w-+]+'.)*'w['w-+]{0,66})'.([a-z]{2,6}(?:'.[a-z]{2})?)$)|(@'[?((25[0-5]'.|2[0-4]['d]'.|1['d]{2}'.|
['d]{1,2}'.))((25[0-5]|2[0-4]['d]|1['d]{2}|['d]{1,2})'.){2}(25[0-5]|2[0-4]['d]|1['d]{2}|['d]{1,2})']?$)/i);
var success=false;
$("#memberemail").change(function()
{
var email=$("#memberemail").val();
success=patter.test(email);
if(success)
{
$("#usernameStatus").html('<img align="absmiddle" src="loading.gif"/> Checking email...');
$.ajax(
{
type: "POST",
url:"regcheckemail.php",
data:"memberemail="+email,
success: function(msg)
{
$("#emailStatus").ajaxComplete(function(event, request, settings)
{
if(msg=="OK")
{
$("#memberemail").removeClass("object_error");
$("#memberemail").addClass("object_ok");
$(this).html('<img align="absmiddle" src="checkmark.png"/>');
success=true;
}
else
{
$("#memberemail").removeClass('object_ok');
$("#memberemail").addClass("object_error");
$(this).html(msg);
success=false;
}
}
);
}
}
);
}
else
{
$("#emailStatus").html("Provided email address is ill-formed");
$("#memberemail").removeClass('object_ok'); // if necessary
$("#memberemail").addClass("object_error");
success=false;
}
}
);
return success;
}
function IsUserAlreadyExist()
{
var success=false;
$("#username").change(function()
{
var usr=$("#username").val();
if(usr.length>=7)
{
$("#usernameStatus").html('<img align="absmiddle" src="loading.gif"/> Checking availability...');
$.ajax(
{
type: "POST",
url:"regcheckuser.php",
data:"username="+usr,
success: function(msg)
{
$("#usernameStatus").ajaxComplete(function(event, request, settings)
{
if(msg=="OK")
{
$("#username").removeClass("object_error");
$("#username").addClass("object_ok");
$(this).html('<img align="absmiddle" src="checkmark.png"/>');
success=true;
}
else
{
$("#username").removeClass('object_ok');
$("#username").addClass("object_error");
$(this).html(msg);
success=false;
}
}
);
}
}
);
}
else
{
$("#usernameStatus").html("The username should have at least 7 characters");
$("#username").removeClass('object_ok');
$("#username").addClass("object_error");
success=false;
}
});
return success;
}
$(document).ready(function()
{
if(IsEmailValidAndNew() && IsUserAlreadyExist())
{
$('button').find("#signup").attr("disabled","false");
}
else
{
$('button').find("#signup").attr("disabled","true");
}
});
</script>
</div>
</body>
我用记事本给它编码，它不起作用，我找不出错误。我不知道有什么好的工具可以用来用javascript编码，它有很棒的选项，比如嵌入式智能感知和调试功能。
您的代码有几个问题。
- 您的电子邮件正则表达式不够彻底（好吧，这实际上并没有停止代码的工作，但这是我注意到的第一件事）
- 您的ajax调用是异步的，这很好，但意味着执行
$.ajax()调用的函数将在收到ajax响应之前完成。您需要对其进行重组，以便从ajax成功回调中执行某些操作 - 您不需要
ajaxComplete()函数——此时您已经在ajax成功处理程序中了，所以将当前ajaxComplete()中的代码直接放在包含成功函数中 - 您从文档就绪状态调用
IsEmailValidAndNew()和IsUserAlreadyExist()一次，然后禁用或启用"注册"控件，但在此之后，您再也不会重新启用或禁用它。您调用这些函数，就好像它们将验证字段一样，但实际上，他们所做的是在字段上设置更改处理程序，这样在用户真正更改字段之前，函数中的代码就不会做任何事情
以下是一种可以构建代码的方法：
$(document).ready(function() {
var emailOK = false,
nameOK = false;
function setSubmitEnabling() {
$("#signup").prop("disabled", !(emailOK && nameOK));
}
setSubmitEnabling();
$("#username").change(function() {
var usr = $(this).val();
if (usr.length < 7) {
$("#usernameStatus").html("The username should have at least 7 characters");
$(this).removeClass('object_ok').addClass("object_error");
nameOK = false;
setSubmitEnabling();
} else {
// format seems OK, so do ajax call:
$("#usernameStatus").html('<img align="absmiddle" src="loading.gif"/> Checking availability...');
$.ajax({
type: "POST",
url:"regcheckuser.php",
data:"username="+usr,
success : function(msg) {
if(msg === "OK")
{
$("#username").removeClass("object_error")
.addClass("object_ok");
$("#usernameStatus").html('<img align="absmiddle" src="checkmark.png"/>');
nameOK = true;
}
else
{
$("#username").removeClass('object_ok')
.addClass("object_error");
$("#usernameStatus").html(msg);
nameOK = false;
}
// now update button state
setSubmitEnabling();
}
});
}
});
$("#memberemail").change(function() {
// basically the same thing as for the username field as shown above,
// except setting emailOK instead of nameOK, so I suggest you get the
// username part working first then come back to do this the same way
});
});
上面代码的想法是，有几个点需要启用或禁用"注册"按钮，这取决于两个不相关的条件。因此，为这些条件中的每一个创建一个标志，并使用函数setSubmitEnabling()来检查标志并启用或禁用按钮。当页面加载时立即调用该函数以设置初始启用/禁用状态，并在需要重新评估启用/禁用态的任何更改时再次调用该函数。
另外，为两个字段中的每一个字段创建一个更改处理程序。更改处理程序将彼此相似，基本上是进行一些初始的快速验证，看看长度和格式是否可以，如果可以，则进行ajax调用以测试唯一性。