强制用户检查 ASP.NET MVC 中的复选框

Question

我已经为我的网站设计了一个注册表单，现在我勾选了模型中定义的条款和条件接受复选框。

现在我想现在有没有办法强制用户选中该复选框？

如果它是在 ASP.NET MVC 中预定义的，我会使用它来检查服务器端和客户端，如果不是，我会使用 Javascript。

这是我的代码

注册视图模型

public class RegisterViewModel
{
    [Required(ErrorMessage = "{0} نمی تواند خالی باشد")]
    [RegularExpression("^[\u0600-\u06FF\u0698\u067E\u0686\u06AF ]{2,}$", ErrorMessage = "نام فقط شامل الفبای فارسی می باشد.")]
    [StringLength(32, MinimumLength = 2, ErrorMessage = "طول نام کاربری بین 4 تا 32 کاراکتر است.")]
    [Display(Name = "نام")]
    public string Firstname { get; set; }

    [Required(ErrorMessage = "{0} نمی تواند خالی باشد")]
    [RegularExpression("^[\u0600-\u06FF\u0698\u067E\u0686\u06AF ]{2,}$", ErrorMessage = "نام فقط شامل الفبای فارسی می باشد.")]
    [StringLength(32, MinimumLength = 2, ErrorMessage = "طول نام کاربری بین 4 تا 32 کاراکتر است.")]
    [Display(Name = "نام خانوادگی")]
    public string LastName { get; set; }

    [Required(ErrorMessage = "{0} نمی تواند خالی باشد")]
    [Phone]
    [Display(Name = "شماره تلفن")]
    public string PhoneNumber { get; set; }

    [Required(ErrorMessage = "{0} نمی تواند خالی باشد")]
    [Display(Name = "جنسیت")]
    public Gender Gender { get; set; }

    [Required(ErrorMessage = "{0} نمی تواند خالی باشد")]
    [RegularExpression("^[a-zA-Z][a-zA-Z_]+$", ErrorMessage = "نام کاربری شامل الفبای انگلیسی، اعداد و آندرلاین می باشد.")]
    [StringLength(16, MinimumLength = 4, ErrorMessage = "طول نام کاربری بین 4 تا 16 کاراکتر است.")]
    [Display(Name = "نام کاربری")]
    public string Username { get; set; }

    [Required(ErrorMessage = "{0} نمی تواند خالی باشد")]
    [EmailAddress(ErrorMessage = "پست الکترونیک به درستی وارد نشده است.")]
    [Display(Name = "پست الکترونیک")]
    public string Email { get; set; }

    [Required(ErrorMessage = "{0} نمی تواند خالی باشد")]
    [StringLength(100, ErrorMessage = "پسوورد باید بین {0} و {2} کاراکتر باشد.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "رمز عبور")]
    public string Password { get; set; }

    [Required(ErrorMessage = "{0} نمی تواند خالی باشد")]
    [DataType(DataType.Password)]
    [Display(Name = "تکرار رمز عبور")]
    [Compare("Password", ErrorMessage = "رمز عبور با تکرارش همخوانی ندارد.")]
    public string ConfirmPassword { get; set; }

    [Required]
    public bool IsAgreeWithTerms { get; set; }

注册查看

<section class="register-area">
<div class="row m-1">
    <div class="col-lg-12 col-md-12 p-0">
        <div class="register-content">
            <div class="d-table">
                <div class="d-table-cell">
                    <div class="register-form">
                        <h3><i class="bx bx-user"></i> ثبت نام در ایران پی سی جِی</h3>
                        @using (Html.BeginForm("Register", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                        {
                            @Html.AntiForgeryToken()
                    <div class="row m-1">
                        <div class="form-group col-lg-6 col-m-6">
                            @Html.TextBoxFor(m => m.Firstname, new { @class = "form-control", @placeHolder = "نام" })
                            @Html.ValidationMessageFor(m => m.Firstname, "", new { @class = "text-danger" })
                        </div>

                        <div class="form-group col-lg-6 col-m-6">
                            @Html.TextBoxFor(m => m.LastName, new { @class = "form-control", @placeHolder = "نام خانوادگی" })
                            @Html.ValidationMessageFor(m => m.LastName, "", new { @class = "text-danger" })
                        </div>

                        <div class="form-group col-lg-6 col-m-6">
                            @Html.EnumDropDownListFor(m => m.Gender, "--جنسیت--", new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.Gender, "", new { @class = "text-danger" })
                        </div>

                        <div class="form-group col-lg-6 col-m-6">
                            @Html.TextBoxFor(m => m.PhoneNumber, new { @class = "form-control", @placeHolder = "شماره تلفن" })
                            @Html.ValidationMessageFor(m => m.PhoneNumber, "", new { @class = "text-danger" })
                        </div>

                        <div class="form-group col-lg-6 col-m-6">
                            @Html.TextBoxFor(m => m.Username, new { @class = "form-control", @placeHolder = "نام کاربری" })
                            @Html.ValidationMessageFor(m => m.Username, "", new { @class = "text-danger" })
                        </div>

                        <div class="form-group col-lg-6 col-m-6">
                            @Html.TextBoxFor(m => m.Email, new { @class = "form-control", @placeHolder = "ایمیل" })
                            @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                        </div>

                        <div class="form-group col-lg-6 col-m-6">
                            @Html.PasswordFor(m => m.Password, new { @class = "form-control", @placeHolder = "رمز عبور" })
                            @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
                        </div>

                        <div class="form-group col-lg-6 col-m-6">
                            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control", @placeHolder = "تکرار رمز عبور" })
                            @Html.ValidationMessageFor(m => m.ConfirmPassword, "", new { @class = "text-danger" })
                        </div>

                        <div class="form-group col-lg-6 col-m-6 terms">
                            @Html.CheckBoxFor(m => m.IsAgreeWithTerms)
                            با <a href="#">قوانین و شرایط</a> ایران پی سی جِی موفق هستم.
                        </div>

                        <div class="form-group col-lg-6 col-m-6">
                            <button type="submit">ثبت نام</button>
                        </div>

                    </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>

那么有什么方法可以禁止用户在不检查IsAgreeWithTerms 字段的情况下提交表单？

感谢回复

Answer 1

您可以编写从IClientValidatable 继承的自定义验证属性，以在服务器端和客户端进行验证时强制值为真，但如果您不想进行额外设置，最简单的方法是重用现有的验证属性。

仅服务器端验证

您可以使用[Range] 对复选框强制执行真值。

[Range(typeof(bool), "true", "true", ErrorMessage = "You need to agree first!")]
public bool IsAgreeWithTerms { get; set; }

客户端和服务器端验证

如果您希望客户端验证也能正常工作，我们需要在视图模型中使用[Compare] 和声明为true 的只读字段，而不是使用[Range]：

public class RegisterViewModel
{
    public bool ExpectedAgreement => true;

    [Compare(nameof(ExpectedAgreement),ErrorMessage = "You need to agree first!")]
    public bool IsAgreeWithTerms { get; set; }
}

然后在视图上，您​​需要将该只读属性存储到隐藏输入中：

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

    @Html.HiddenFor(x => x.ExpectedAgreement)

    <div class="form-group">
        @Html.CheckBoxFor(x => x.IsAgreeWithTerms)
        @Html.LabelFor(x => x.IsAgreeWithTerms)
        <div class="text-danger">
            @Html.ValidationMessageFor(x => x.IsAgreeWithTerms)
        </div>
    </div>

    <button type="submit" class="btn btn-success">Submit</button>
}