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

一、绑定参数的表单验证:(通过ValidationAttribute特性绑定到Model来验证

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

jquery.validate.js

jquery.validate.unobtrusive.js


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

  

      ...

    

    

  


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)
    
Album
@Html.LabelFor(model => model.GenreId, "Genre")
@Html.DropDownList("GenreId", String.Empty) @Html.ValidationMessageFor(model => model.GenreId)
@Html.LabelFor(model => model.ArtistId, "Artist")
@Html.DropDownList("ArtistId", String.Empty) @Html.ValidationMessageFor(model => model.ArtistId)
@Html.LabelFor(model => model.UserName )
@Html.EditorFor(model => model.UserName ) @Html.ValidationMessageFor(model => model.UserName)
@Html.LabelFor(model => model.Price)
@Html.EditorFor(model => model.Price) @Html.ValidationMessageFor(model => model.Price)
@Html.LabelFor(model => model.AlbumArtUrl)
@Html.EditorFor(model => model.AlbumArtUrl) @Html.ValidationMessageFor(model => model.AlbumArtUrl)

}

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 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 的扩展方法EditorForModel将作为Model的Person对象以编辑模式呈现在表单之中

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

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

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

1.Html:

姓名: 错误信息放置的位置
年龄:
邮政编码:
2.JS 验证:


 
 

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:


@*Ajax.BeginForm 需要的js 文件*@

2.创建表单:

@using (Ajax.BeginForm("AddForm", "JQValidate", new { }, new AjaxOptions() { HttpMethod = "post", OnBegin = "ajaxFormOnBegin", 
OnSuccess = "afterOnSuccess", OnFailure = "afterOnFailure", UpdateTargetId = "UpdateTargetHiddenID" }, new { @id = "AddForm" }))
     {
         
姓名: 错误信息放置的位置
年龄:
邮政编码:
}

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


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

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

1.html:

姓名: 错误信息放置的位置
年龄:
邮政编码:
2.js 验证:

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

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字符串中包含部分视图及验证信息。




你可能感兴趣的:(ASP.NET,MVC)