elementui表单规则校验

小白敲bug

已于 2022-06-08 15:35:10 修改

阅读量4k

点赞数 2

分类专栏： elementui 文章标签： javascript vue.js 前端

于 2022-06-08 14:43:09 首次发布

本文链接：https://blog.csdn.net/weixin_45944877/article/details/125183439

版权

elementui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

elementui表单规则校验

rules中单个表单域校验规则可以包含多个数组，每个数组即是一条校验规则

rules属性

属性说明

type 标志要使用的validator的数据类型
可选值：
string: 字符串类型（默认值） | number: 数字类型
boolean:布尔类型 | method: 函数类型 | regexp:正则表达式
integer: 整型 | float: 双精度浮点型数字 | array: 数组类型
object: 对象类型 | enum: 枚举值 | date: 日期格式
url: 网址格式 | hex: 16进制数字 | email: 电子邮箱格式
any: 任意类型
required 必填
message 未通过校验的提示信息
trigger 触发条件（change||blur）
min 最小值、max 最大值

{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }

len 精准长度 (优先级高于min,max)

rules: {
    type: "array", required: true, len: 3
}

fields:
深层规则，可以通过将嵌套规则分配给规则的属性来验证object或array类型的验证规则，如地址对象的省市区的规则验证：

object类型：

address: {
    type: "object", required: true,
    fields: {
      street: {type: "string", required: true},
      city: {type: "string", required: true},
      zip: {type: "string", required: true, len: 8, message: "invalid zip"}
    }
  }

array类型：

roles: {
    type: "array", required: true, len: 3,
    fields: {
      0: {type: "string", required: true},
      1: {type: "string", required: true},
      2: {type: "string", required: true}
    }
  }

enum 枚举中存在该值 (type必须为enum类型)

role: {type: "enum", enum: ['admin', 'user', 'guest']}

whitespace 不能包含空白符

whitespace: [{
    type: "string",
    message: '只存在空格',
    whitespace:true,
    trigger: ['change', 'blur']
}]

pattern 正则表达式 (必须加 required: true)

{ type : "string" , required: true , pattern : /^[a-z]+$/ }

validator函数为指定字段自定义验证函数

关于validator函数

validator(rule,value,callback，source, options)

参数说明：

rule：指向该条规则对象。
value：新的值，用于参与运算、对比。
callback：执行回调，使用方法是：callback(‘…’)
如果不传参：表示验证通过，一般不必专门强调。
如果传入值：字符串会作为错误提示，但是显示优先级低于外层的message。
【比如callback(‘嘻嘻嘻’);跟message: '哈哈哈’同时存在，则会提示哈哈哈。】
source：是一个对象，结构类似{completionTime: “2020-08-09”}，也就是键值对。因为跟value的值一致，所以source可以不用。
options：额外配置项
-first {Boolean值}：true则表示第一个未通过校验的字段发生错误就调用 callback，即不再继续校验剩余字段

-firstFields {Boolean/StringArray值}：多条校验规则的配置

-Boolean：每个字段的第一个规则发生错误就调用 callback，即不再继续校验该字段的剩余规则

-StringArray：指定字段的第一个规则发生错误就调用 callback

-suppressWarning {Boolean}：是否禁止无效值的内部警告

使用方式：


export default {
    data() {
      ......
      //第一步：自定义校验函数
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        //第二步：在rules中使用
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          ......
        }
      };
    },
    ......
  }

案例1：

要求：完工时间应晚于开工时间
代码实现：

        startTime: [
          { required: true, message: "开工时间不能为空", trigger: "blur" },
          { type: 'date', validator: (rule, value, callback, source, options) => {
            if (new Date(value).getTime() >= new Date(this.form.completionTime).getTime()) {
              callback('');
            }
          }, message: "开工时间应早于竣工时间", trigger: "blur" },
        ],
        completionTime: [
          { required: true, message: "竣工时间不能为空", trigger: "blur" },
          { type: 'date', validator: (rule, value, callback, source, options) => {
            if (new Date(value).getTime() <= new Date(this.form.startTime).getTime()) {
              callback('');
            }
          }, message: "竣工时间应晚于开工时间", trigger: "blur" },
        ],

案例2：

要求：开工时间与竣工时间不能同一天”。（此时需展示多个回调，应该删除message）

        startTime: [
          { required: true, message: "开工时间不能为空", trigger: "blur" },
          { type: 'date', validator: (rule, value, callback, source, options) => {
            if (new Date(value).getTime() > new Date(this.form.completionTime).getTime()) {
              callback('开工时间应早于竣工时间');
            } else if (new Date(value).getTime() === new Date(this.form.completionTime).getTime()) {
              callback('开工时间与竣工时间不能同一天');
            }
          }, trigger: "blur" },
        ],
        completionTime: [
          { required: true, message: "竣工时间不能为空", trigger: "blur" },
          { type: 'date', validator: (rule, value, callback, source, options) => {
            if (new Date(value).getTime() < new Date(this.form.startTime).getTime()) {
              callback('竣工时间应晚于开工时间');
            } else if (new Date(value).getTime() === new Date(this.form.completionTime).getTime()) {
              callback('开工时间与竣工时间不能同一天');
            }
          }, trigger: "blur" },
        ],

案例3

要求:考虑Promises异步。如果返回一个Promise对象，则其中必须有reject或callback抛出错误值，才会在界面上报错
代码实现：

        completionTime: [
          { required: true, message: "竣工时间不能为空", trigger: "blur" },
          { required: true, 
            validator: (rule, value, callback) => {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  reject('test'); // 或者写 callback('test') 也可以实现报错
                }, 2000);
              });
            },
            trigger: "blur"
          },
        ],

案例4：

要求：考虑非Promises异步。比如就一个setTimeout，此种情况必须用callback抛出错误：
代码实现：

        completionTime: [
          { required: true, message: "竣工时间不能为空", trigger: "blur" },
          { required: true, 
            validator: (rule, value, callback) => {
              setTimeout(() => {
                callback('test');
              }, 2000);
            },
            trigger: "blur"
          },
        ],

案例5：

要求：使用正则校验，有楼号、房间号，房间号必须以楼号开头，中间必须有0。
代码实现：

        floor: [
          { required: true, message: '楼层不能为空', trigger: 'blur' },
          { validator: (rule, value, callback, source, options) => {
            if (value[0] === '0') {
              callback('首位不得为0');
            } else if (value > 99) {
              callback('楼层不得超过99');
            } else if (this.form.roomNumber && !new RegExp('^' + value).test(this.form.roomNumber)) {
              callback('房间号前需加楼层，例如：' + value + '02');
            } else {
              callback();
            }

          }, trigger: "blur" },
        ],
        roomNumber: [
          { required: true, message: '房间号不能为空', trigger: 'blur' },
          { validator: (rule, value, callback, source, options) => {
            if (!this.form.floor) {
              callback('请先填写楼层');
            } else if (value.length > 4) {
              callback('房间号最多4位');
            } else if (!new RegExp('^' + this.form.floor).test(value)) {
              callback('房间号前需加楼层，例如：' + this.form.floor + '02');
            } else if (value.slice(-2, -1)[0] !== '0') {
              callback('房间号倒数第二位需是0，例如：' + this.form.floor + '02');
            } else {
              callback();
            }
          }, trigger: "blur" },
        ]