我设置了一个简单的表单,并使用ajax + jquery来检查有效的用户名(在DB中不存在)和电子邮件地址(有效格式,在DB中不存在),如下所示
<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调用来测试唯一性。
代码未在服务器目录php中创建文件 - php我正在尝试使用以下代码将新文件写入服务器error_reporting(E_ALL); ini_set('display_errors', 1); if($_SERVER['REQUEST_METHOD'] == "POST") { $html = $_POST['html'];…
CodeIgniter更新查询被执行两次 - php我正在使用CodeIgniter 2.2。每次访问页面时,我都必须用+1更新数据库。代码可以工作,但是每次都会增加+2。示例:如果是total views=2,则在单击页面后total views应该是3,但是数据库中的值是4。我确定我在控制器中仅调用一次模型add_one_to_view_image。控制者 function view(){ $view_i…
故障排除“警告:session_start():无法发送会话高速缓存限制器-标头已发送” - php我收到警告:session_start()[function.session-start]:无法发送会话缓存限制器-标头已发送(错误输出开始如果我将表单数据提交到其他文件进行处理,则可以正常工作。但是,如果我将表单数据提交到同一页面,则会出现此错误。请建议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0…
通过php表单修改我的xml文件 - php这是我的xml文件和下面的php代码。我输入了一个输入类型,它将按名字搜索学生。然后将显示有关特定学生的信息,并且将显示另一个按钮更新。问题是我想在那之后修改信息。如何通过标签名称获取元素,以便可以修改有关特定学生的信息?<students> <student> <firstname>John</firstname&…
在ajax之后将页面内容复制到同一页面 - php我有简单的注册公式,我希望首先使用ajax发送,而不刷新页面以控制是否插入正确的数据,然后仅重定向到其他页面。问题是,当我通过ajax将其发送到同一页面后,一切正常,但是页面内容重复,我可以看到两次...这是我的ajaxfunction registruj () { var name = $('#meno').val(); var pri…