element-ui form表单动态新增删除校验规则

最新推荐文章于 2024-04-12 18:30:00 发布

原创最新推荐文章于 2024-04-12 18:30:00 发布 · 2.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#js #elementui

js 同时被 2 个专栏收录

7 篇文章

订阅专栏

Vue.js

1 篇文章

订阅专栏

该博客介绍了如何在前端实现动态的表单验证规则，包括账号和密码的验证。`addRules`函数用于添加验证规则，如密码长度、字符组成等。`removeRules`函数用于清除验证规则。同时，通过`watch`监听`name`的变化，动态添加或移除验证规则。此示例对于前端表单验证和管理具有指导意义。

    // 动态校验
    addRules() {
      // 定义规则
      const validatePass = (rule, value, callback) => {
        value = String(value)
        if (!value) {
          callback(new Error('请输入密码'))
        }
        if (value.length < 6 || value.length > 20) {
          callback(new Error('密码长度为 6-20 个字符'))
        }
        if (!(/.*[0-9]+.*/).test(value) || !(/.*[a-z]+.*/).test(value) || !(/.*[A-Z]+.*/).test(value)) {
          callback(new Error('密码至少由 3 个类别（数字，小写字母，大写字母）的字符组成'))
        }
        callback()
      }

      const account= [
        {required: true, message: '账号不能为空', trigger: ["change", 'blur']}
      ];
      const passwd = [
        {validator: validatePass, required: true, trigger: ["change", 'blur']}
      ]
      // 给rules对象添加规则
      this.rules = { ...this.rules, account, passwd };
    },
    removeRules() {
      // 清除指定校验规则
      this.$refs["saveForm"].clearValidate(["account", "passwd"]);
      // 这行必须
      this.rules = { ...this.rules, account: [], passwd: []  };
    },

然后根据相关条件写相关逻辑

例如

watch: {
    'name': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.removeRules();
        }else {
          this.addRules()
        }
      }
    }
  },