el-form 表单验证

form表单提供验证功能，这里记录一下rule的参数，方便以后查看。

参数说明 

type

string -- 该项的数据类型，不在所支持的类型中则返回错误信息，支持类型如下：

• string : String 类型，默认类型
• number : Number 类型，包含整数和小数
• integer :  整数类型
• float : 小数类型，只能是小数
• boolean : Boolean 类型，true/false
• method : 函数类型
• regexp : 正则表达式
• array：数组类型
• object：对象类型
• enum：枚举类型
• date：日期类型
• url：网址类型
• email：邮箱类型
• hex：16进制类型
• any：任意类型

//验证是否为空以及数字      
      age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄只能输入数字', trigger: 'blur' },
        ],
//验证邮箱
     email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
        ],

//针对array不同的写法：
:prop="'exTimeList.'+index+'.time'"  或者
:prop="'exTimeList['+index+']time'"

required

Boolean -- 必填字段，非空验证，true会在label 前面添加*

pattern

正则表达式验证

       phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^1[0-9]{10}$/, message: '手机号码格式不正确', trigger: 'blur'}
        ],

min、max

判断数字的大小范围；判断字符串和数组的长度

      name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          {
            min: 3,
            max: 5,
            message: '名称长度在3~5个字符之间',
            trigger: 'blur',
          },
        ],

len

判断数字的值；判断字符串和数组的长度；优先级高于min、max

enum

枚举判断，输入的值必须是枚举值

sex: [
          {type:'enum',enum:['boy','girl'], required:true,message:'请输入boy或者girl',trigger:'blur'}
        ]

trigger

验证触发方式；string 或者array ；例如：'blur'、'change'、['blur','change']

whitespace

验证字符串是否全部是空格

transform

在验证触发前对数据进行处理

validator

自定义验证规则，required 不添加依然会触发

   const checkCancelReason = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入原因'))
      } else if (value.length > 50) {
        return callback(new Error('原因最多输入50个字符'))
      }
      return callback()
    }

     reason: [
          { required: true, validator: checkCancelReason, trigger: 'blur' },
        ],

message

验证信息提示

fields

深层次规则验证，对object和array进行嵌套验证

     score: [
          {
            required: true,
            type: 'object',
            fields: {
              english: {
                required: true,
                type: 'number',
                min: 0,
                max: 100,
                message: '英语成绩只能在0~100',
                trigger: 'blur',
              },
              chinese: {
                required: true,
                type: 'number',
                min: 0,
                max: 100,
                message: '语文成绩只能在0~100',
                trigger: 'blur',
              },
            },
          },
        ]

触发验证方法以及重置方法

          this.$refs[formRef].validate((e) => {
              if (e) {
                //验证通过
              } else {
                return false
              }
            }

           this.$refs[formRef].resetFields();