如何使用JavaScript删除data-validate-rules属性中的指定规则词

你可以封装一套和DOM classList 用法高度一致的工具方法，操作体验和增删CSS类完全一致，同时也支持单次临时操作的简化写法。

方案1：可复用的封装工具（推荐） #

封装后支持规则的增、删、查、切换所有常用操作，自动处理规则去重、空值过滤等异常情况：

// 校验规则操作工具，用法与classList对齐
const validateRuleList = (element) => {
  // 读取当前规则并格式化
  const getRules = () => {
    const ruleStr = element.dataset.validateRules || ''
    return ruleStr.split(',').map(rule => rule.trim()).filter(Boolean)
  }
  // 规则回写到dom属性
  const setRules = (rulesArr) => {
    element.dataset.validateRules = [...new Set(rulesArr)].join(',')
  }

  return {
    // 判断是否包含指定规则
    has: (rule) => getRules().includes(rule),
    // 添加规则，支持批量
    add: (...rulesToAdd) => {
      const current = getRules()
      setRules([...current, ...rulesToAdd])
    },
    // 删除规则，支持批量
    remove: (...rulesToRemove) => {
      const current = getRules().filter(rule => !rulesToRemove.includes(rule))
      setRules(current)
    },
    // 切换规则状态
    toggle: (rule, force) => {
      const hasRule = this.has(rule)
      if (force === true) return !hasRule && this.add(rule)
      if (force === false) return hasRule && this.remove(rule)
      hasRule ? this.remove(rule) : this.add(rule)
      return !hasRule
    },
    // 获取当前所有规则数组
    get value() {
      return getRules()
    }
  }
}

使用示例 #

const incomeInput = document.getElementById('monthlyIncome')
const rules = validateRuleList(incomeInput)

// 核心需求：删除noZero规则
rules.remove('noZero')

// 其他操作示例
// 添加单个/多个规则
rules.add('max10000', 'isNumber')
// 判断是否存在必填规则
console.log(rules.has('required'))
// 切换noZero规则的存在状态
rules.toggle('noZero')

方案2：单次操作简化写法 #

如果只是临时需要删除一次noZero规则，不需要复用，可以直接写单行逻辑处理：

const el = document.getElementById('monthlyIncome')
el.dataset.validateRules = el.dataset.validateRules.split(',').map(r => r.trim()).filter(r => r !== 'noZero').join(',')

内容的提问来源于stack exchange，提问作者AJ Jones