在主POST之前使用ajax验证来检查电子邮件地址是否已经存在(ASP.NET MVC4)

时间:2014-02-25 18:32:44

标签: ajax asp.net-mvc json asp.net-mvc-4

在过去,我能够对查找用户名的方法进行异步调用,以查看它是否已经存在于数据库中,然后在用户输入文本框时将其作为JSON返回。已经很长时间了,我似乎无法找到解释如何做到这一点的文章。我现在已经正确设置了所有设置E.G。

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

以及我的webconfig

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

我的视图模型

public class EmailListSignUpViewModel
{
    [Required]
    public string FirstName { get; set; }
    [Required]
    public string LastName { get; set; }
    [Required]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }
    [Required]
    [Compare("Email")]
    [Display(Name = "Confirm Email")]
    public string EmailConfirmation { get; set; }
}

我如何实现我正在寻找的功能?

3 个答案:

答案 0 :(得分:2)

您可以在ViewModel上使用Remote属性,并设置一个操作方法,以返回false为false,作为Buboon的答案。

MVC Remote Validation explained

如果您想自己动手,可以这样做。侦听keyup事件并将text box的值发送到action方法,该方法再次运行查询db表并返回一个结果,您将在getJSON回调方法中评估并执行必要的

$(function(){
   $("#Email").keyup(function(){
     var val=$("#Email").val();
     $.getJSON("@Url.Action("Check","User")", { key : val },function(res){
       if(res=="exists")
       {
         $("#someMsgDiv").html("exists");
       }
     });
   });
});

假设您在UserController中有Check动作方法。

public ActionResult Check(string key)
{
  //check in db and return "exists" if record exists
}

答案 1 :(得分:1)

在相同的控制器名称中创建方法:

    public JsonResult IsUniq(string Username) {
            //to do
            return Json("...");
        }

在ViewModel中使用属性

[Remote("IsUniq", "ControllerName")]
public string Username{ get; set; }

答案 2 :(得分:0)

你可以做一个ajax调用来检查你是否想要。我如何在客户端验证电子邮件是否具有功能

function validateEmail(email) {
    if (email == "") {
        return false;
    } else {
        var re = /^(([^<>()[\]\\.,;:\s@@\"]+(\.[^<>()[\]\\.,;:\s@@\"]+)*)|(\".+\"))@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;;
        return email.match(re)
    }
}

在提交按钮单击事件上进行设置,如果返回true则不执行任何操作。如果为false则执行preventDefault。

$('.btnSubmit').on('click', function(e){
    if(!validateEmail($('.txtEmail').val())){
        e.preventDefault();
    }
});

如果您有任何问题,请告诉我