如何为checkValidity()方法添加表单输入项自定义验证规则

你当前使用的是原生HTML5表单校验体系，无需推翻现有代码，结合jQuery绑定事件和原生setCustomValidityAPI即可无缝添加自定义规则，和原有校验逻辑完全兼容。

实现步骤 #

1. 保留原有原生校验代码，无需修改 #

你原本的校验代码会自动识别自定义规则生成的错误信息，不需要做任何调整。

2. 新增jQuery自定义规则绑定 #

你可以针对单个输入框单独绑定规则，也可以统一封装规则配置批量初始化。

单条规则绑定示例

// jQuery 自定义规则初始化
$(function() {
  // 示例1：两次密码输入一致性校验
  $('input[name="confirm_password"]').on('input', function() {
    const originPwd = $('input[name="password"]').val()
    if ($(this).val() !== originPwd) {
      // 设置自定义错误，会被原生checkValidity()自动识别
      this.setCustomValidity('两次输入的密码不一致')
    } else {
      // 校验通过必须清空自定义错误，否则表单会一直提示校验失败
      this.setCustomValidity('')
    }
  })

  // 示例2：11位手机号格式校验
  $('input[name="mobile"]').on('input', function() {
    const mobileReg = /^1[3-9]\d{9}$/
    if (!mobileReg.test($(this).val())) {
      this.setCustomValidity('请输入正确的11位手机号')
    } else {
      this.setCustomValidity('')
    }
  })

  // 其他规则可以按照以上格式新增，选择对应的输入框绑定事件、写校验逻辑即可
})

批量规则封装（可选优化）

如果自定义规则较多，可以统一维护规则配置表，批量初始化减少重复代码：

$(function() {
  // 自定义规则配置表
  const customValidRules = [
    {
      // 输入框选择器
      selector: 'input[name="confirm_password"]',
      // 校验方法，返回布尔值表示是否通过
      validator: (val) => val === $('input[name="password"]').val(),
      // 校验失败提示语
      errorMsg: '两次输入的密码不一致'
    },
    {
      selector: 'input[name="mobile"]',
      validator: (val) => /^1[3-9]\d{9}$/.test(val),
      errorMsg: '请输入正确的11位手机号'
    }
  ]

  // 批量绑定规则
  customValidRules.forEach(rule => {
    $(rule.selector).on('input change blur', function() {
      const isValid = rule.validator($(this).val())
      this.setCustomValidity(isValid ? '' : rule.errorMsg)
    })
  })
})

注意事项 #

• 自定义错误设置后，必须在校验通过时清空错误状态，否则表单会一直校验失败无法提交
• 可以根据业务需求选择不同的触发事件，比如仅在提交时校验可以将事件绑定在表单的submit事件中
• 原有的HTML原生校验属性（如required、type="email"、minlength等）依然生效，和自定义规则互不冲突

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