Asp.NetCore Web开发之输入验证

2022-03-29 09:36:45 浏览数 (1)

这节接着讲基于asp.net core 的web开发。

在开发中,验证表单数据是很重要的一环,如果对用户输入的数据不加限制,那么当错误的数据提交到后台后,轻则破坏数据的有效性,重则会导致服务器瘫痪,这是很致命的。

所以进行数据有效性验证是必要的,我们一般通过js或者使用HTML标签自带的属性进行有效性限制,但在不断的演化中,也出现了一些很优秀的数据验证框架,使用它们能高效的开发,最常用的就是基于Jquery的jquery.validate.js。

下面就来讲解一下它的用法:

要使用这个框架,就要先引用框架包(注意:此包是基于Jquery开发的,所以要先引用jquery.js),由于数据验证是必要的,所以微软将其集成到了asp.net core MVC框架中,也就是说我们可以直接引用,它们的引用如下所示:

代码语言:javascript复制
//如果你用的asp.net core MVC 你可以直接复制此代码到你需要的地方
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

它的用法就是在jquery代码块中键入以下代码:

代码语言:javascript复制
 $('#此处引用form的id').validate({
        //设置验证失败时存放错误提示的标签
        errorElement: 'span',
        //设置标签用到的样式
        errorClass: 'invalid-feedback',
        //设置验证用的规则
        rules: {
            此处填写要验证的input标签的name: {
                required: true
            }
        },
        //设置验证失败的错误提示
        messages: {
            此处填写要验证的input标签的name: {
                //验证规则以及不匹配的显示文字
                required: "此项必填"
            }
        },
        //验证失败触发的事件
        errorPlacement: function (error, element) {
            element.next().remove(); //删除显示图标
            element.after(
                '<span class="glyphicon form-control-feedback invalid-feedback" aria-hidden="true"></span>'
            );
            element.parent().append(error);
        },
        //设置高亮显示的事件
        highlight: function (element) {
            $(element)
                .closest('.form-group')
                .find('input')
                .addClass('is-invalid');
        },
        //验证成功的事件
        success: function (label) {
            var el = label.closest('.form-group').find('input');
            el.next().remove(); //与errorPlacement相似
            el.after('<span class="glyphicon form-control-feedback valid-feedback" aria-hidden="true"></span>');
            el.removeClass('is-invalid').addClass('is-valid');
        }
    });

这些代码中,需要关注的就是rules和messages,rules通过name定位要验证的标签,设置验证规则,messages设置验证失败显示的内容。整个代码是通过id定位应用于哪个form。其他的代码用于设置样式等信息,初学者可忽略。

设置以后,我们可以通过$('#被验证的form的id').valid()这个方法查看验证结果,也就是true和false,以此来判断是否该提交表单。

该框架默认支持的规则有:

规则名

取值

描述

required

true|false

必填字段

email

true|false

电子邮件格式

date

true|false

日期格式

number

true|false

数字

digits

true|false

整数

equalTo

#field

输入值必须和 #field 相同

maxlength

数字

最大长度

minlength

数字

最小长度

max

数字

最大值

min

数字

最下值

除此之外,我们还可以自定义验证规则,代码如下:

代码语言:javascript复制
 //添加检查密码格式的自定义规则
jQuery.validator.addMethod("CheckPwd", function (value, element) {
    var pwd = /^w $/;
    return pwd.test(value);
}, "密码格式为数字字母或下划线");

通过addMethod(规则名,验证逻辑回调,验证失败的显示文字)这个方法自定义规则,该方法的第二个参数是一个callback类型的函数,在验证时被调用,value是输入的值,element是验证的元素。

以上就是该框架的大体用法,但解释此用法不是本节的主要目的,我们了解了它的用法后,接下来介绍一个更简单的用法:asp.net core的输入验证,为了简化表单验证的代码量,asp.net core 从后端出发,通过为属性标注特性的方式,在前台动态的生成jquery验证代码,具体用法如下:

代码语言:javascript复制
using System.ComponentModel.DataAnnotations;//输入验证的命名空间
public class PersonData
{
    [StringLength(3)]//字符串长度为3
    [Required]//必填自段
    public string Name { get ; set; }

    [Range(0,100)]
    [Required]
    public int Age { get; set; }
}

在属性上标记特性(不熟悉特性的同学,请点击Attribute特性了解它的用法),在Razor页面(同上,Asp.NetCore Web开发之RazorPage)使用如下形式定位要验证的input:

代码语言:javascript复制
@model PersonData //引用PersonData类

<div class="text-center">
    <form  method="post">
        <div class="form-group">
            <input asp-for="Name" type="text" name="Name" value="" class="form-control" />
            <span asp-validation-for="Name" class="red"></span>
            <br />
            <input asp-for="Age" type="text" name="Age" value="" class="form-control" />
            <span asp-validation-for="Age" class="red"></span>
            <br />
        </div>
        <button type="submit">提交</button>
    </form>
</div>

通过asp-forTagHalper匹配验证的属性,通过asp-validation-for TagHalper显示验证错误信息。

运行结果如下:

这种用法相对来说是比较方便的,默认支持的规则有(常用):

Required

必填

StringLength

字符串长度

Range

对于int数据,可以指定数据范围

EmailAddress

必须是电子邮件格式

DateType

输入的是格式化的时间

RegularExpression

匹配正则表达式

具体用法,读者自行尝试。

同样的,我们也可以自定义验证规则,但是自定义的规则,是在后台进行验证的,不会在前台直接提示:

方法一(继承ValidationAttribute类,重写IsValid())

代码语言:javascript复制
public class MyValidationAttribute: ValidationAttribute
{
    public string GetErrorMessage() => "您的输入有误!";

    /// <summary>
    /// 验证
    /// </summary>
    /// <param name="value">输入的值</param>
    /// <param name="validationContext">验证上下文(此处不进行深入讲解)</param>
    /// <returns>成功返回Success,失败返回Result对象,可以通过遍历获取错误信息</returns>
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value == "12")
        {
            return new ValidationResult(GetErrorMessage());
        }
        return ValidationResult.Success;
    }
}

定义完成以后,将此标记添加在属性上:

代码语言:javascript复制
[StringLength(3)]
[MyValidation]
public string Name { get; set; }

也就是说,当Name为"12"的时候,会验证出错。

在需要验证PersonData的Action中,我们就可以进行验证,代码如下:

代码语言:javascript复制
Console.WriteLine(ModelState.IsValid);
foreach (var prop in ModelState.Values)
{
    //遍历错误
    foreach (var error in prop.Errors)
    {
        //打印错误信息
        Console.WriteLine(error.ErrorMessage);
    }
}

ModelState.IsValid是一个bool类型的属性,指示是否验证成功。

ModelState.Values就是代表一个个PersonData中的属性值,这是外层循环,又因为,验证可能为多个,所以通过第二层循环遍历该属性所有的错误信息,现在来测试一下:

直接输入12,控制台打印结果如下:

方法二(模型类实现IValidatableObject接口,实现自身验证):

代码语言:javascript复制
public class PersonData:IValidatableObject
{
  [StringLength(3)]
  public string Name { get; set; }

  [Range(0, 100)]
  [Required]
  public int Age { get; set; }

  /// <summary>
  /// 自身验证
  /// </summary>
  /// <param name="validationContext">验证上下文</param>
  /// <returns>错误列表</returns>
  public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
  {
      if (Age==24)
      {
          yield return new ValidationResult(
              $"您的输入有误 ", new []{nameof(Age});
      }
  }
}

实现Validate方法,可以直接访问属性,进行数据限定,ValidationResult方法的参数一是错误信息,参数二是属性名,接下来看看在Action中如何使用验证:

代码语言:javascript复制
public IActionResult Test(PersonData person)
{
   foreach (var prop in person.Validate(null))
   {
      foreach (var name in prop.MemberNames)
      {
          Console.WriteLine(name);
      }
      Console.WriteLine(prop.ErrorMessage);
   }
  Console.WriteLine(prop.ErrorMessage);
  return View();
}

使用它内部的方法进行验证,这也是为什么叫自身验证,可以直接遍历返回值,MemberNames就是参数二,ErrorMessage就是参数一,在Age输入框输入24,控制台打印如下:

源码文件位于:

https://github.com/ChunleiSu/PublicDemo/tree/master/C#/C#Senior/CustomerValidata

本节到此结束...

0 人点赞