为什么我的自定义客户端验证不起作用

Question

初学aspmvc 学到自定义客户端验证，结果按书上写的无法触发

Answer 1

🕖上午好，题主！目前：🟢[在线]
📢参考通义千问、由郭老师整理提供！
📣今日诗号：只愿君心似我心，定不负相思意。

在ASP.NET MVC中实现自定义客户端验证可能会遇到一些常见的问题。为了帮助你解决这个问题，我将提供一个简单的示例来说明如何设置和使用自定义客户端验证。这个示例将包括模型、控制器、视图以及必要的JavaScript文件。

1. 创建自定义验证属性

首先，你需要创建一个自定义的验证属性。这里我们假设你要验证一个密码是否包含至少一个大写字母。

using System;
using System.ComponentModel.DataAnnotations;

public class PasswordAttribute : ValidationAttribute, IClientValidatable
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var password = value as string;
        if (string.IsNullOrEmpty(password))
        {
            return new ValidationResult("Password is required.");
        }
        if (!password.Any(char.IsUpper))
        {
            return new ValidationResult("Password must contain at least one uppercase letter.");
        }
        return ValidationResult.Success;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ValidationType = "password",
            ErrorMessage = "Password must contain at least one uppercase letter."
        };
        yield return rule;
    }
}

2. 在模型中使用自定义验证属性

接下来，在你的模型类中使用这个自定义验证属性：

public class RegisterViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Password]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }
}

3. 添加jQuery Unobtrusive Validation库

确保你的项目引用了jquery.validate.unobtrusive.js和jquery.validate.js，这两个库是启用客户端验证所必需的。

4. 在视图中启用验证

在你的视图（例如：Register.cshtml）中，确保你已经启用了客户端验证：

@model YourNamespace.RegisterViewModel

@{
    ViewBag.Title = "Register";
}

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div>
        @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email)
        @Html.ValidationMessageFor(m => m.Email)
    </div>

    <div>
        @Html.LabelFor(m => m.Password)
        @Html.PasswordFor(m => m.Password)
        @Html.ValidationMessageFor(m => m.Password)
    </div>

    <div>
        @Html.LabelFor(m => m.ConfirmPassword)
        @Html.PasswordFor(m => m.ConfirmPassword)
        @Html.ValidationMessageFor(m => m.ConfirmPassword)
    </div>

    <input type="submit" value="Register" />
}

5. 实现客户端验证脚本

最后，你需要为你的自定义验证规则添加JavaScript。这可以通过在视图中添加一个脚本块来完成：

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        (function ($) {
            $.validator.addMethod('password', function (value) {
                return value.match(/^(?=.*[A-Z]).+$/);
            }, '');

            $.validator.unobtrusive.adapters.addBool('password');
        })(jQuery);
    </script>
}

以上步骤应该能帮助你在ASP.NET MVC应用中实现自定义客户端验证。如果仍然有问题，请检查控制台是否有JavaScript错误，并确保所有必要的库都已正确加载。