HTML5表单验证反馈

Posted on In

validity 对象

通过 validity 对象，通过下面的 valid 可以查看验证是否通过，如果八种验证都通过返回 true，有一种失败则返回 false

  • oText.addEventListener(‘invalid’, fn, false);
  • ev.preventDefault()
  • valueMissing: 输入值为空时
  • typeMismatch: 控件值与预期类型不匹配
  • patterMismatch: 输入值不满足 pattern 正则
  • tooLong: 超过 maxLength 最大限制
  • rangeUnderflow: 验证的 range 最小值
  • rangeOverflow: 验证的 range 最大值
  • setMismatch: 验证 range 的当前值是否符合 min、max、step 的规则
  • customError: 不符合自定义验证–setCustomValidity()设置自定义验证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="">
  <input type="text" name="" id="text" required />
  <input type="submit" value="提交" />
</form>

<script>
  let oText = document.getElementById("text")
  oText.addEventListener("invalid", fn, false)

  function fn() {
    console.log(this.validity)
    console.log(this.validity.valid)
  }
</script>