带有 Angular JS 的 ASP .Net MVC 中的表单验证答案

【问题标题】：Form Validation in ASP .Net MVC with Angular JS带有 Angular JS 的 ASP .Net MVC 中的表单验证
【发布时间】：2016-04-05 19:36:35
【问题描述】：

我正在尝试将我的演示项目迁移到 Angular，因为我正在学习相同的内容。但是我面临一个两难选择，即在客户端添加或更新一些信息时是否选择剃刀视图表单验证还是选择 Angular JS？

那么在 Angular 中我将如何实现相同的目标。假设我有一个 _AddDetails.cshtml 部分视图：

@model MvcApplication4.Models.Student
@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend><strong>Create a record</strong></legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.UserName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserName)
            @Html.ValidationMessageFor(model => model.UserName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Password)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Password)
            @Html.ValidationMessageFor(model => model.Password)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DepartmentID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.DepartmentID)
            @Html.ValidationMessageFor(model => model.DepartmentID)
        </div>

        <p>
            <input type="submit" class="createDetails" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

在 MVC 中，我选择了模型的 FluentValidation。

模型看起来像：

[FluentValidation.Attributes.Validator(typeof(StudentViewModelValidator))]
public class Student
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int StudentId { get; set; }
    public String LastName { get; set; }
    public String FirstName { get; set; }
    public String UserName { get; set; }
    public String Password { get; set; }

    [ForeignKey("Department")]
    public int DepartmentID { get; set; }

    //Department Navigational Property
    public Department Department { get; set; }
}

验证看起来像：

public class StudentViewModelValidator : AbstractValidator<Student>
{
    public StudentViewModelValidator()
    {
        RuleFor(m => m.FirstName)
            .NotEmpty().WithMessage("First Name is required.")
            .Matches(@"^\D*$").WithMessage("Numbers are not allowed in First Name");
        RuleFor(m => m.LastName)
            .NotEmpty().WithMessage("Last Name is required.")
            .Matches(@"^\D*$").WithMessage("Numbers are not allowed in Last Name");
        RuleFor(m => m.UserName)
            .NotEmpty().WithMessage("User Name is required.")
            .Matches(@"^[a-zA-Z0-9\.\$]*$").WithMessage("Only . and $ are allowed special characters in a user name");
        RuleFor(m => m.Password)
            .NotEmpty().WithMessage("Password is required.")
            .Length(4, 10).WithMessage("Password should be 4 to 10 characters long")
            .Matches(@"^(?=(\D*\d){2,})(?=([^a-zA-Z]*[a-zA-Z]))(?=[^\.\$\~\&]*[\.\$\~\&]).*").WithMessage("Password should contain at least 2 digits,a letter and at least a special character in it");

    }

但是如果我重新构建我的视图而不是这个剃刀模板，我将如何实现这些复杂的正则表达式验证？我知道我有类似的东西

ng-required
ng-minlength
ng-maxlength

但是我该如何实现上述剃须刀验证？

【问题讨论】：

标签： angularjs asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

使用可以将ng-pattern 用于regex

 <script>
      angular.module('ngPatternExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.regex = '\\d+';
        }]);
    </script>
    <div ng-controller="ExampleController">
      <form name="form">
        <label for="regex">Set a pattern (regex string): </label>
        <input type="text" ng-model="regex" id="regex" />
        <br>
        <label for="input">This input is restricted by the current pattern:     </label>
        <input type="text" ng-model="model" id="input" name="input"         ng-pattern="regex" /><br>
    <hr>
    input valid? = <code>{{form.input.$valid}}</code><br>
    model = <code>{{model}}</code>
      </form>
    </div>

参考： https://docs.angularjs.org/api/ng/directive/ngPattern

【讨论】：

【解决方案2】：

我在使用 Angular 的 MVC 项目中实现了验证，所以我使用了 ng 模式，我在尝试包含一些对用户名有效的特殊字符时遇到了问题：“@”、“_”和“- ”。

我成功的唯一方法是将它们作为单独的可重复字符添加到我的模式末尾：

ng-pattern="/^[a-zA-Z0-9.]*[@('_')]*[@('-')]*[@('@')]*$/"

我希望这对你有用。

【讨论】：