1.1 校验表单

Q1：表设置类型type为数字型number，结果验证不通过

代码如下
原因：普通input输入的值，视为字符串，所以导致不匹配

  1.             <a-form-item label="缴费金额">
  2.               <a-input
  3.                 placeholder="请输入缴费金额"
  4.                 style="width: 20%"
  5.                 v-decorator="[
  6.                   'amount',
  7.                   {
  8.                     rules: [
  9.                       {
  10.                         required: true,
  11.                         type: 'number',
  12.                         message: '请输入缴费金额'
  13.                       }
  14.                     ]
  15.                   }
  16.                 ]"
  17.               />
  18.             </a-form-item>

错误截图：
image.png
解决方案：加入内置类型转换函数

  1. transform(value) {
  2.   return Number(value)
  3. }
  1.             <a-form-item label="缴费金额">
  2.               <a-input
  3.                 placeholder="请输入缴费金额"
  4.                 style="width: 20%"
  5.                 v-decorator="[
  6.                   'amount',
  7.                   {
  8.                     rules: [
  9.                       {
  10.                         required: true,
  11.                         type: 'number',
  12.                         message: '请输入缴费金额',
  13.                         transform(value) {
  14.                           return Number(value)
  15.                         }
  16.                       }
  17.                     ]
  18.                   }
  19.                 ]"
  20.               />
  21.             </a-form-item>

Q2：常用规则的参数

type

要使用的验证程序的类型，识别的类型值如下：

  • string: 必须是 String类型。这是默认类型。
  • number: 必须是 Number类型。
  • boolean: 必须是 Boolean类型。
  • method: 必须是 Function类型。
  • regexp: 必须是 RegExp的实例或在创建新 RegExp 时不生成异常的字符串。
  • integer: 必须是 Number 和整数类型。
  • float: 必须是 Number和浮点数类型。
  • array: 必须是由array.isarray确定的数组。
  • object: 必须是 Object类型，而不是Array.IsArray类型。
  • enum: 值必须存在于枚举中。
  • date: 必须是 Date 类型。
  • url: 必须是url类型。
  • hex: 必须是十六进制类型。
  • email: 必须是电子邮件类型。
    Required：是否必填
    boolean,是否必填
    例：必须输入：required: true
    Pattern：正则验证
    模式规则属性表示正则表达式,该值必须匹配才能通过验证。
    这个是属于精华，后面补充
    Range：长度范围或者大小范围
    使用min和max属性定义范围。对于字符串和数组类型，将根据长度进行比较，对于数字类型，数字不得小于min，也不得大于max。
    例：
    字符串，限定长度：type: 'string', min: 6, max: 12
    数字，限定大小：type: 'number', min: 100, max: 500, transform(value) { return Number(value) }，这里注意：需要使用transform转换类型，否则可能会导致失败
    Length：指定长度
    验证字段的确切长度。对于字符串和数组类型，对length属性执行比较，对于数字类型，此属性指示数字的完全匹配，即，它可能仅严格等于len。如果len属性与最小和最大范围属性组合，则len优先。
    例：指定长度：len: 8
    Enumerable：只能是指定几项
    枚举，要从可能值列表中验证值，请使用带有枚举属性的枚举类型，列出该字段的有效值。
    1. var descriptor = {
    2. role: { type: "enum", enum: ['admin', 'user', 'guest'] }
    3. }
    Whitespace：允许空白值通过
    空白，通常将仅包含空格的必填字段视为错误。要为仅包含空格的字符串添加其他测试，请将空白属性添加到值为true的规则。规则必须是字符串类型。
    defaultField：验证数组或者对象子项目
    defaultField属性可与数组或对象类型一起使用，以验证容器的所有值。它可以是包含验证规则的对象或数组。

    直白一点讲：就是用来验证type是object和array的子项目中的值

例如：

  1. var descriptor = {
  2.  urls: {
  3.  type: "array", required: true,
  4.  defaultField: {type: "url"}
  5.  }
  6. }

Transform：值类型转换或者格式化

Q1中就用到了这个
有时需要在验证之前转换值，转换类型，可能是为了强制价值或以某种方式对其进行消毒。为此，请将验证规则添加到转换有时需要在验证之前转换一个值，可能是强制值或以某种方式对其进行清理。为此，请向验证规则添加转换函数。该属性在验证之前被转换，并重新分配给源对象，以在适当的位置改变该属性的值。
如果没有转换函数，验证将失败，因为模式不匹配，因为输入包含前导空格和尾随空格，但通过添加转换函数验证传递，同时清理字段值。

Messages：错误时输出的消息

消息，根据您的应用程序要求，您可能需要i18n支持，或者您可能更喜欢不同的验证错误消息。