代码之家 › 专栏 › 技术社区 › HasanG Joe Dabones

使用ASP.NET AJAX检查电子邮件可用性,如果存在,则使页面无效

jquery asp.net-ajax ajax asp.net

HasanG Joe Dabones · 技术社区 · 14 年前

我正在尝试对电子邮件地址执行Ajax验证。我需要知道用户是否已经注册,所以我需要在我的数据库中检查它。有类似的例子: http://www.highoncoding.com/Articles/439_Performing_Instant_UserName_Availability_Check_Using_JQuery_Ajax_API.aspx

我当前的代码是:

function validateEMail(email) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "ajax/services.asmx/validateEMail",
        data: "{'email': '" + email + "'}",
        dataType: "json",
        success: function (result) {
            $("#<%=lEMail.ClientID %>").html(result.d.result);
        }
    });
}

和服务器功能:

public class EMailValidateResult
{
    public bool valid { get; set; }
    public string result { get; set; }
}

[WebMethod]
public EMailValidateResult validateEMail(string email)
{
    EMailValidateResult result = new EMailValidateResult();

    result.valid = false;
    result.result = "<img src=\"icons/accept.png\" title=\"E-Mail is valid\" />";

    return result;
}

如果电子邮件已经存在,我需要拒绝用户页回发。

3 回复 | 直到 14 年前

HasanG Joe Dabones 14 年前

通过使用customvalidator:

<asp:CustomValidator ID="cvEMail" runat="server" ControlToValidate="tEMail"
Display="None" ClientValidationFunction="validateEMail"
OnServerValidate="cvEMail_ServerValidate"/>
<span id="lEMail" runat="server"></span>

客户端javascript:

<script type="text/javascript">
    function validateEMail(source, arguments) {
        var isValid;

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "ajax/services.asmx/validateEMail",
            data: "{'email': '" + arguments.Value + "'}",
            dataType: "json",
            async: false,
            success: function (result) {
                $("#<%=lEMail.ClientID %>").html(result.d.result);
                isValid = result.d.valid;
            }
        });

        arguments.IsValid = isValid;
    }
</script>

服务器端Ajax功能:

[WebMethod]
public EMailValidateResult validateEMail(string email)
{
    EMailValidateResult result = new EMailValidateResult();

    result.valid = false;
    result.result = "Invalid...";

    if (Regex.IsMatch(email,@"\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"))
    {
        result.valid = true;
        result.result = "Valid...";
    }
    else if(check if exists in database)
    { invalid, exists message... }

    return result;
}

服务器端验证处理程序:

protected void cvEMail_ServerValidate(object source,ServerValidateEventArgs args)
{
    args.IsValid = false;
    lEMail.InnerHtml = "invalid...";

    if(Regex.IsMatch(args.Value,@"\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"))
    {
        args.IsValid = true;
        lEMail.InnerHtml = "valid...";
    }
    else if(check if exists in database)
    { invalid, exists message... }
}

来源: http://brian.dobberteen.com/code/jquery_ajax_custom_validator/

Aristos 14 年前

在客户端,根据在Ajax调用上设置的电子邮件用户标志,设置一个全局变量以允许或不允许表单提交。

var eMailExist = false;

function AllowPostBack()
{
  if(eMailExist)
    alert("This email all ready exist");

  return !eMailExist;
}

关于表单标签

onsubmit="return AllowPostBack();"

在Ajax调用中,如果存在,则返回JSON

function validateEMail(email) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "ajax/services.asmx/validateEMail",
        data: "{'email': '" + email + "'}",
        dataType: "json",
        success: function (result) {
            $("#<%=lEMail.ClientID %>").html(result.d.result);
            eMailExist = result.d.valid;
        }
    });
}

在后面的帖子中,再次检查是否存在禁用javascript的情况。

GôTô 14 年前

我想你需要设置 Page_IsValid 在成功回调中出错