在ASP .Net MVC中使用Angular JS進行表單驗證

Question

我正在嘗試將我的演示項目遷移到Angular，因爲我學習的是相同的。但是我面臨着一個兩難的選擇，即是否要在客戶端添加或更新某些信息時選擇使用剃刀視圖表單驗證 或選擇Angular JS？

因此，在角度我將如何實現相同。 假設我有一個_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 

但我將如何實現像上面剃鬚刀驗證？

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

Answer 2

我實現了驗證中使用的角度我的MVC項目，所以我用了NG-模式，我有一個試圖包含一些特殊字符作爲用戶名的有效問題：「@」，「_」和「 - 」。

我成功的唯一途徑是對他們在我的模式的結尾添加爲單獨重複的字符：

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

我希望這對你的作品。