如何通过ASP.net MVC客户端调用Web API实现邮箱存在性远程验证？

看起来你已经把Web API的核心验证逻辑搞定了——能判断邮箱是否存在并返回布尔值，MVC调用API添加用户也正常，就是卡在输入邮箱时的实时远程验证上对吧？默认的RemoteAttribute之所以不管用，是因为它默认是调用同项目内的MVC Action，而你的验证接口在独立的Web API服务里，所以得换两种方式来实现：

方案一：自定义RemoteAttribute适配Web API #

我们可以继承默认的RemoteAttribute，重写它的验证逻辑，让它去请求你的Web API接口：

1. 编写自定义远程验证属性 #

public class RemoteApiAttribute : RemoteAttribute
{
    private readonly string _apiEndpoint;

    public RemoteApiAttribute(string apiEndpoint) : base("")
    {
        _apiEndpoint = apiEndpoint;
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value == null || string.IsNullOrWhiteSpace(value.ToString()))
            return ValidationResult.Success;

        var email = Uri.EscapeDataString(value.ToString());
        using (var httpClient = new HttpClient())
        {
            try
            {
                var response = httpClient.GetAsync($"{_apiEndpoint}?email={email}").Result;
                response.EnsureSuccessStatusCode();
                
                var emailExists = response.Content.ReadFromJsonAsync<bool>().Result;
                if (emailExists)
                {
                    return new ValidationResult(ErrorMessage ?? "该邮箱已被注册");
                }
            }
            catch (HttpRequestException)
            {
                return new ValidationResult("验证邮箱状态失败，请稍后重试");
            }
        }
        return ValidationResult.Success;
    }
}

2. 在ViewModel中使用自定义属性 #

假设你的注册ViewModel是RegisterViewModel，给Email字段加上这个自定义属性：

public class RegisterViewModel
{
    [Required(ErrorMessage = "请输入邮箱")]
    [EmailAddress(ErrorMessage = "请输入有效的邮箱地址")]
    [RemoteApi("https://your-web-api-domain/api/accounts/checkemailexists", ErrorMessage = "该邮箱已被注册")]
    public string Email { get; set; }

    // 其他注册字段（比如密码、确认密码等）
}

3. 确保视图启用客户端验证 #

在你的注册视图里，要引入jQuery和验证相关的脚本，这样才能触发实时验证：

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

这样用户输入邮箱并失去焦点时，就会自动调用Web API验证，实时显示错误信息。

方案二：前端手动用jQuery AJAX实现验证 #

如果自定义属性的方式还是有问题，直接在前端写AJAX请求会更灵活，也更容易排查问题：

1. 给邮箱输入框绑定验证事件 #

在注册视图中，找到Email输入框，绑定blur事件（用blur比keyup好，能减少不必要的API请求）：

<div class="form-group">
    <label asp-for="Email" class="control-label"></label>
    <input asp-for="Email" class="form-control" />
    <span asp-validation-for="Email" class="text-danger"></span>
    <span id="email-check-message" class="text-danger"></span>
</div>

<script>
$(document).ready(function() {
    // 失去焦点时验证邮箱
    $('#Email').on('blur', function() {
        const email = $(this).val().trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        
        // 先做前端格式验证
        if (!email || !emailRegex.test(email)) {
            $('#email-check-message').text('');
            $(this).removeClass('is-invalid is-valid');
            return;
        }

        // 调用Web API验证
        $.ajax({
            url: 'https://your-web-api-domain/api/accounts/checkemailexists',
            type: 'GET',
            data: { email: email },
            success: function(isExists) {
                if (isExists) {
                    $('#email-check-message').text('该邮箱已被注册');
                    $('#Email').addClass('is-invalid').removeClass('is-valid');
                } else {
                    $('#email-check-message').text('');
                    $('#Email').addClass('is-valid').removeClass('is-invalid');
                }
            },
            error: function() {
                $('#email-check-message').text('验证失败，请稍后重试');
                $('#Email').addClass('is-invalid').removeClass('is-valid');
            }
        });
    });

    // 表单提交前再次验证，防止前端绕过
    $('form').on('submit', function(e) {
        const email = $('#Email').val().trim();
        if (!email) return;

        // 同步验证（确保提交前完成API请求）
        let isValid = true;
        $.ajax({
            url: 'https://your-web-api-domain/api/accounts/checkemailexists',
            type: 'GET',
            data: { email: email },
            async: false,
            success: function(isExists) {
                if (isExists) {
                    isValid = false;
                    $('#email-check-message').text('该邮箱已被注册');
                    $('#Email').addClass('is-invalid');
                }
            },
            error: function() {
                isValid = false;
                $('#email-check-message').text('验证失败，请稍后重试');
            }
        });

        if (!isValid) e.preventDefault();
    });
});
</script>

2. 处理跨域问题 #

如果你的Web API和MVC客户端不在同一个域名下，必须在Web API中配置CORS，允许MVC域名访问：
在Web API的Startup.cs中添加CORS配置：

using Microsoft.AspNetCore.Cors;

public void ConfigureServices(IServiceCollection services)
{
    // 配置CORS策略
    services.AddCors(options =>
    {
        options.AddPolicy("AllowMvcClient",
            policy => policy.WithOrigins("https://your-mvc-client-domain")
                            .AllowAnyHeader()
                            .AllowAnyMethod());
    });

    // 其他服务配置（比如AddControllers、AddDbContext等）
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他中间件（比如UseExceptionHandler、UseStaticFiles等）
    app.UseCors("AllowMvcClient"); // 要放在UseRouting之前
    app.UseRouting();
    // 其他中间件（比如UseAuthorization、UseEndpoints等）
}

重要提醒 #

不管用哪种方案，表单提交时一定要在MVC的Action里再次调用Web API做验证，不能只依赖前端验证——毕竟前端验证很容易被绕过，服务器端二次验证才能确保数据的正确性。

内容的提问来源于stack exchange，提问作者floDV1996