angularjs - 使用 Angular JS 在 ASP .Net MVC 中进行表单验证

Question

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

那么在 Angular 中，我将如何实现相同的目标。假设我有一个 _AddDetails.cshtml 局部 View :

@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");

    }

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

ng-required
ng-minlength
ng-maxlength

但是我怎样才能像上面的 Razor 验证一样实现呢？

Answer 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