Element ui自定义验证规则validator(vue+typescript项目)

最新推荐文章于 2024-08-28 13:17:54 发布

琦玉和龙卷

最新推荐文章于 2024-08-28 13:17:54 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术博客网页前端文章标签： vue.js typescript ui elementui

本文链接：https://blog.csdn.net/lichunjiang_/article/details/122718939

技术博客同时被 2 个专栏收录

20 篇文章

订阅专栏

网页前端

16 篇文章

订阅专栏

本文介绍了一种在前端表单中实现自定义验证规则的方法，包括如何定义验证规则变量、初始化验证规则以及如何创建自定义验证方法。通过具体实例展示了如何确保日期范围的有效性，并提供了两种验证规则类型：必填项验证和正则表达式验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义规则变量

private rules = {};

初始化

this.Rules = {date: [{required: true, validator: this.validateTime, trigger: 'change'}]};

定义自定义验证规则方法

validateTime(rule, value, callback) {
    const start = value;
    const end = this.timeVO.endTime;
    if (!start) {
      callback(new Error('开始日期不能为空'));
    }
    if (end) {
      if (end < start) {
        callback(new Error('截止日期必须大于开始日期'));
      }
    }
    // 始终执行callback，使可以执行this.$refs[formName].validate
    callback();
  }

ps :验证规则，有required 和 pattern，可以这样定义

 this.rules['name'] = [
      {required: true, message: '请输入姓名', trigger: 'blur'},
      {pattern: /^[A-Za-z0-9.·\u4e00-\u9fa5]+$/, message: '支持字母、数字、汉字', trigger: 'blur'}
    ];