ASP.NET MVC 表单验证方式总结

最新推荐文章于 2024-08-24 18:23:35 发布

@朱较瘦

最新推荐文章于 2024-08-24 18:23:35 发布

阅读量1.4w

点赞数 1

分类专栏： ASP.NET MVC

本文链接：https://blog.csdn.net/zhulongxi/article/details/51336705

版权

ASP.NET MVC 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了ASP.NET MVC中多种表单验证方法，包括利用ValidationAttribute特性、IValidatableObject接口、IDataErrorInfo接口以及手动验证等。同时，还探讨了如何使用jQuery Validate插件进行客户端验证。

摘要由CSDN通过智能技术生成

一、绑定参数的表单验证：（通过ValidationAttribute特性绑定到Model来验证）

1.引入js文件：
jquery的某个版本

jquery.validate.js

jquery.validate.unobtrusive.js

2.在网站Web.config中，相关的属性必须设置为true：

  <appSettings>

      ...

    <add key="ClientValidationEnabled" value="true" />

    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

  </appSettings>

3.在用到的View Model上添加验证特性或自定义特性：

    public class Customer

    {

        [Required]

        [ValidUserNameAttribue(ErrorMessage = "用户名只能为darren")]

        [Display(Name = "用户名")]

        public string UserName { get; set; }

    }

   自定义验证特性ValidUserNameAttribue （继承特性类ValidationAttribute，重写IsValid方法）

   using System.ComponentModel.DataAnnotations;

 

   namespace jan.Extension

   {

       public class ValidUserNameAttribue : ValidationAttribute

       {

           public override bool IsValid(object value)

           {

               //只有同时满足2个条件就让通过，否则验证失败

               return (value != null && value.ToString() == "darren");

           }

       }

   }

4.在View中加入验证

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Album</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.GenreId, "Genre")
        </div>
        <div class="editor-field">
            @Html.DropDownList("GenreId", String.Empty)
            @Html.ValidationMessageFor(model => model.GenreId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ArtistId, "Artist")
        </div>
        <div class="editor-field">
            @Html.DropDownList("ArtistId", String.Empty)
            @Html.ValidationMessageFor(model => model.ArtistId)
        </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.Price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Price)
            @Html.ValidationMessageFor(model => model.Price)
        </div>

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

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

5.在服务器端：

 if (ModelState.IsValid)
  {
   db.Albums.Add(album);
   db.SaveChanges();
   return RedirectToAction("Index");
  }

二、绑定参数的表单验证（通过实现IValidatableObject接口来实现Model自我验证）

步骤1、2、4、5同上，

步骤3.在ViewModel中：实现IValidatableObject接口，实现其Validate方法：

在实现的Validate方法中，我们从验证上下文中获取被验证的Person对象，并对其属性成员进行逐个验证。如果数据成员没有通过验证，我们通过一个ValidationResult对象封装错误消息和数据成员名称（属性名），该方法最终返回的是一个元素类型为ValidationResult的集合。ASP.NET MVC 会自动调用该方法对绑定的数据对象实施验证。

public class Person: IValidatableObject
{
    [DisplayName("姓名")]
    public string Name { get; set; }

    [DisplayName("性别")]
    public string Gender { get; set; }

    [DisplayName("年龄")]
    public int? Age { get; set; }

    public IEnumerable<ValidationResult> Validate( ValidationContext validationContext)
    {
        Person person = validationContext.ObjectInstance as Person;
        if (null == person)
        {
            yield break;
        }
        if(string.IsNullOrEmpty(person.Name))
        {
            yield return new ValidationResult("'Name'是必需字段", new string[]{"Name"});
        }

        if (string.IsNullOrEmpty(person.Gender))
        {
            yield return new ValidationResult("'Gender'是必需字段", new string[] { "Gender" });
        }
        else if (!new string[]{"M","F"}.Any( g=>string.Compare(person.Gender,g, true) == 0))
        {
            yield return new ValidationResult("有效'Gender'必须是'M','F'之一",   new string[] { "Gender" });
        }

        if (null == person.Age)
        {
            yield return new ValidationResult("'Age'是必需字段",    new string[] { "Age" });
        }
        else if (person.Age > 25 || person.Age < 18)
        {
            yield return new ValidationResult("'Age'必须在18到25周岁之间",    new string[] { "Age" });
        }            
    }
}

三.绑定参数的表单验证（ 通过实现IDataErrorInfo接口）

步骤1、2、4、5同上，

步骤3.在ViewModel中实现IDataErrorInfo接口，将其索引参数作为属性：

IDataErrorInfo接口定义在“System.ComponentModel”命名空间下，它提供了一种标准的错误信息定制方式。如下面的代码片段所示，IDataErrorInfo具有两个成员，只读属性Error用于获取基于自身的错误消息，而只读索引用于返回指定数据成员的错误消息。

public class Person : IDataErrorInfo
{
    [DisplayName("姓名")]
    public string Name { get; set; }

    [DisplayName("性别")]
    public string Gender { get; set; }

    [DisplayName("年龄")]
    public int? Age { get; set; }

    [ScaffoldColumn(false)]
    public string Error { get; private set; }

    public string this[string columnName]
    {
        get 
        {
            switch (columnName)
            {
                case "Name":
                    { 
                        if(string.IsNullOrEmpty(this.Name))
                        {
                            return "'姓名'是必需字段";
                        }
                        return null;
                    }
                case "Gender":
                    {
                        if (string.IsNullOrEmpty(this.Gender))
                        {
                            return "'性别'是必需字段";
                        }
                        else if (!new string[] { "M", "F" }.Any(
                            g => string.Compare(this.Gender, g, true) == 0))
                        {
                            return "'性别'必须是'M','F'之一";
                        }
                        return null;
                    }
                case "Age":
                    {
                        if (null == this.Age)
                        {
                            return "'年龄'是必需字段";
                        }
                        else if (this.Age > 25 || this.Age < 18)
                        {
                            return "'年龄'必须在18到25周岁之间";
                        }
                        return null;
                    }
                default: return null;    
            }
        }
    }
}

四.绑定参数的表单验证（ 直接在Action中手工验证绑定的参数）（很少用）

1.ViewModel：

public class Person
{
    [DisplayName("姓名")]
    public string Name { get; set; }

    [DisplayName("性别")]
    public string Gender { get; set; }

    [DisplayName("年龄")]
    public int? Age { get; set; }
}

2.Action中：

我们在Validate该方法中我们对作为参数的Person对象的3个属性进行逐条验证，如果提供的数据没有通过验证，我们会调用当前ModelState的AddModelError方法将指定的验证错误消息转换为ModelError保存起来。

 [HttpPost]
    public ActionResult Index(Person person)
    {
        Validate(person);

        if (!ModelState.IsValid)
        {
            return View(person);
        }
        else
        {
            return Content("输入数据通过验证");
        }
    }

 private void Validate(Person person)
    {
        if (string.IsNullOrEmpty(person.Name))
        {
            ModelState.AddModelError("Name", "'Name'是必需字段");
        }

        if (string.IsNullOrEmpty(person.Gender))
        {
            ModelState.AddModelError("Gender", "'Gender'是必需字段");
        }
        else if (!new string[] { "M", "F" }.Any(
            g => string.Compare(person.Gender, g, true) == 0))
        {
            ModelState.AddModelError("Gender", 
            "有效'Gender'必须是'M','F'之一");
        }

        if (null == person.Age)
        {
            ModelState.AddModelError("Age", "'Age'是必需字段");
        }
        else if (person.Age > 25 || person.Age < 18)
        {
            ModelState.AddModelError("Age", "有效'Age'必须在18到25周岁之间");
        }
    }
}

3.View中：

直接调用HtmlHelper<TModel> 的扩展方法EditorForModel将作为Model的Person对象以编辑模式呈现在表单之中

@using (Html.BeginForm())
    { 
        @Html.EditorForModel()
        <input type="submit" value="保存"/>
    }

五. Jquery Validate插件表单验证（通过使用jaquery validate插件来进行表单验证）（适用于ASP.NET WebForm 和ASP.NET MVC两种开发方式）

法一：普通表单提交+Jquery Validate验证方式：

1.Html：

<form id="addForm" method="post" action="/JQValidate/AddForm">
         <div>
             姓名：
             <input type="text" name="txtName" id="txtName" />
             <span class="errorMsg">错误信息放置的位置</span>
             <br />
             年龄：
             <input type="text" name="txtAge" />
             <span class="errorMsg"></span>
             <br />
             邮政编码：
             <input type="text" name="txtZipCode" />
             <span class="errorMsg"></span>
         </div>
         <div>
             <input type="submit" value="提交" />
         </div>
     </form>

2.JS 验证：

<script src="~/Scripts/jquery-1.7.1.js"></script>
 <script src="~/Scripts/jquery.validate.js"></script>
 <script type="text/javascript">
     $(function () {
         // 表单验证
         formValidate();
     });
 
     var formValidate = function () {
         // 添加自定义校验（邮政编码验证）
         jQuery.validator.addMethod("isZipCode", function (value, element) {
             var zipCode = /^[0-9]{6}$/;
             return this.optional(element) || (zipCode.test(value));
        }, "请正确填写您的邮政编码");
 
         $("#addForm").validate({  // #JQForm是form表单的ID
            rules: {
                 txtName: {  // 要验证的表单的id
                   required: true, // 是否是必填项
                   minlength: 2,  // 最小长度
                   remote: "/JQValidate/ValidateName"// 返回 true 就会出现错误信息
                 },
                 txtAge: {
                     required: true,
                     range: [18, 30]
                 },
                 txtZipCode: {
                     required: true,
                     isZipCode: true,
                 },
             },
             messages: {// 如果没有给属性错误提示，就会用默认提示
                 txtName: {
                     required: "请输入会员名称",  // 如果提交的时候没有填写提示的文字
                     minlength: "会员名称的长度不能小于2位", // 如果输入的长度小于2提示的文字
                     remote: "用户名重复"
                 },
                 txtAge: {
                     required: "年龄不能为空",
                     range: "年龄范围是18~30"
                 },
                 txtZipCode: {
                     required: "邮政编码不能为空",
                 },
             },
             errorPlacement: function (error, element) { // 自定义错误信息放置的位置
                 error.appendTo(element.next("span"));
             },
         })
     };
 </script>

3.添加自定义校验：

http://huqiji.iteye.com/blog/2166986

// 添加自定义校验（邮政编码验证）
jQuery.validator.addMethod("isZipCode", function (value, element) {
 var zipCode= /^[0-9]{6}$/;
 return this.optional(element) || (zipCode.test(value));
 }, "请正确填写您的邮政编码");

4.远程验证：

返回值为true 就提示错误信息，否则不提示，

 remote: "/JQValidate/ValidateName",// 返回 true 就会出现错误信息

注意如果不传参数，默认是把当前校验的值传到后台校验，如果还要传入其他参数通过这种形式（dataType必须是json类型）

 remote: { // 默认会把当前验证的值传到后台验证，如果还需要传输其他的参数在data中添加
   url: "/JQValidate/ValidateName",
   type: "post",
   data: { "testData": "testName" },
   dataType: "json", // 此处返回类型必须是JSON
  }

法二、Ajax表单Ajax.BeginForm提交+Jquery Validate验证方式（实现验证成功后的异步提交表单）

1.引入js:

<script src="~/Scripts/jquery-1.7.1.js"></script>
@*Ajax.BeginForm 需要的js 文件*@
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>

2.创建表单：

@using (Ajax.BeginForm("AddForm", "JQValidate", new { }, new AjaxOptions() { HttpMethod = "post", OnBegin = "ajaxFormOnBegin", 
OnSuccess = "afterOnSuccess", OnFailure = "afterOnFailure", UpdateTargetId = "UpdateTargetHiddenID" }, new { @id = "AddForm" }))
     {
         <div>
             姓名：
             <input type="text" name="txtName" id="txtName" />
             <span class="errorMsg">错误信息放置的位置</span>
             <br />
             年龄：
             <input type="text" name="txtAge" />
             <span class="errorMsg"></span>
             <br />
             邮政编码：
             <input type="text" name="txtZipCode" />
             <span class="errorMsg"></span>
         </div>
         <div>
             <input type="submit" value="提交" />
         </div>
     }

3.js验证：同法一步骤2.3.4

法三、非Form表单提交+Jaquery Validate方式

有时候页面上不仅是表单数据，也有表格等其他数据，而不想通过form表单都提交到后台，但是又想通过Jquery.Validate方式验证。那么我们可以这样做。

1.html：

<form>
         <div>
             姓名：
             <input type="text" name="txtName" id="txtName" />
             <span class="errorMsg">错误信息放置的位置</span>
             <br />
             年龄：
             <input type="text" name="txtAge" />
             <span class="errorMsg"></span>
             <br />
             邮政编码：
             <input type="text" name="txtZipCode" />
             <span class="errorMsg"></span>
         </div>
         <div>
             <input type="button" value="提交" οnclick="javascript: btnSubmit();" />
         </div>
     </form>

2.js 验证：

Jquery.Validate 中有一个方法是valid()，是用来判断表单是否验证通过的，同时会进行校验是否合法。

<script type="text/javascript">
     $(function () {
         // 表单验证
         formValidate();
     });
 
     var formValidate = function () {
         // 添加自定义校验（邮政编码验证）
         jQuery.validator.addMethod("isZipCode", function (value, element) {
             var zipCode = /^[0-9]{6}$/;
             return this.optional(element) || (zipCode.test(value));
         }, "请正确填写您的邮政编码");
 
         $("#addForm").validate({  // #JQForm是form表单的ID
             rules: {
                 txtName: {  // 要验证的表单的id
                     required: true, // 是否是必填项
                     minlength: 2,  // 最小长度
                     remote: "/JQValidate/ValidateName",// 返回 true 就会出现错误信息 
                 },
                 txtAge: {
                     range: [18, 30]
                 },
                 txtZipCode: {
                     required: true,
                     isZipCode: true,
                 },
             },
             messages: {// 如果没有给属性错误提示，就会用默认提示
                 txtName: {
                     required: "请输入会员名称",  // 如果提交的时候没有填写提示的文字
                     minlength: "会员名称的长度不能小于2位", // 如果输入的长度小于2提示的文字
                     remote: "用户名重复"
                 },
                 txtAge: {
                     required: "年龄不能为空",
                     range: "年龄范围是18~30"
                 },
                 txtZipCode: {
                     required: "邮政编码不能为空",
                 },
             },
             errorPlacement: function (error, element) { // 自定义错误信息放置的位置
                 error.appendTo(element.next("span"));
             },
         })
     };
 </script>

3.点击按钮判断Jaquery Validate验证是否通过，通过就往后台提交数据，没有通过会出现错误提示.

     // 非submit按钮提交方式
     var btnSubmit = function () {
         // 检测表单是否验证通过 并进行表单验证
         var validateState = $("#addForm").valid();
         if (!validateState) {
             return false;
         }
  
         // 往后台提交数据，当然还可以传入其他你想提交的数据
         $.ajax({
             url: "/JQValidate/AddForm",
             type: "post",
             dataType: "text",
             data:{txtName:$("#txtName").val()},
             success: function (data) {
                 alert(data);
             }
         });
         
     };

六.ASP.NET MVC异步表单验证和异步非表单验证：三种方法 http://www.csharpwin.com/dotnetspace/13578r5351.shtml

1、通过Ajax.BeginForm()方式，返回部分视图显示验证信息。
2、通过jQuery+Html.BeginForm()方式，返回部分视图显示验证信息。
3、通过jquery，返回json字符串，json字符串中包含部分视图及验证信息。