html5 form 表单

HTML 属性

inputmode: 在移动端，inputmode 值会影响弹出的键盘布局

<!-- 默认值，普通任意文本 -->
<input type="text" inputmode="text" />
<!-- 电话号码 -->
<input type="text" inputmode="tel" />
<!-- url 地址 -->
<input type="text" inputmode="url" />
<!-- 邮箱 -->
<input type="text" inputmode="email" />
<!-- 数字 -->
<input type="text" inputmode="numeric" />
<!-- 小数 -->
<input type="text" inputmode="decimal" />
<!-- 搜索 -->
<input type="text" inputmode="search" />

accesskey: 可以为元素设置快捷键，当按下快捷键后，可以聚焦元素

<!-- 按下键盘 Alt + b 可聚焦元素-->
<input type="text" accesskey="b" />

tabindex: 用户可以使用 tab 键切换聚焦的元素，默认情况下，切换的顺序和元素的顺序一致，如果希望不一致，可以通过 tabindex 属性进行手动干预

<input type="text" tabindex="3" />
<input type="text" tabindex="2" />
<input type="text" tabindex="1" />

autocapoitalize：是一个枚举属性，它控制用户输入/编辑文本输入时文本输入是否自动大写，以及如何自动大写。属性必须取下列值之一：

• off or none: 没有应用自动大写（所有字母都默认为小写字母）。
• on or sentences: 每个句子的第一个字母默认为大写字母；所有其他字母都默认为小写字母。
• words: 每个单词的第一个字母默认为大写字母；所有其他字母都默认为小写字母。
• characters: 所有的字母都默认为大写。

在物理键盘上输入时，autocapitalize 属性不会影响行为。相反，它会影响其他输入机制的行为，比如移动设备的虚拟键盘和语音输入。这种机制的行为是，它们经常通过自动地将第一个句子的字母大写来帮助用户。autocapitalize 属性使作者能够覆盖每个元素的行为。

autocapitalize 属性永远不会为带有 type 属性，其值为 url、email 或 password 的 <input> 元素启用自动大写。

如何关闭 ios 键盘首字母自动大写

<input type="text" autocapoitalize="off" />

input 输入框验证

只允许输入数字(整数：小数点不能输入)
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" />
允许输入小数(两位小数)
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
允许输入小数(一位小数)
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" />
开头不能为0，且不能输入小数
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" />

html5 form-Validity 验证函数

ValidityState 对象

DOM 接口 ValidityState 代表一个元素可有的有效性状态（validity states），其与约束验证（constraint validation）相关。这些状态一起解释了当元素值无效时，它的值为什么不能通过验证。

属性

对于以下每一个布尔值属性来说，值为 true 表示这就是验证失败的特定原因之一；valid 属性是例外，它为 true 表示元素值满足所有的约束条件。

badInput

一个 Boolean，true 表示用户提供了浏览器不能转换的输入。

customError

一个 Boolean，表示这个元素的自定义验证信息是否已通过调用元素的 setCustomValidity() 方法设置为一个非空字符串。

<input id="inp1" type="text" />
<input id="inp2" type="text" />
<script>
  console.log(document.getElementById('inp1').validity.customError) // false
  document.getElementById('inp2').setCustomValidity('Invalid')
  console.log(document.getElementById('inp2').validity.customError) // true
</script>

patternMismatch

一个 Boolean，true 表示元素值不匹配规定的 pattern，false 则表示匹配。true 的时候元素可用 CSS 伪类 :invalid 匹配。

<input id="inp1" type="text" value="1234" />
<input id="inp2" type="text" value="A1" pattern="[a-z]{2}" />
<script>
  console.log(document.getElementById('inp1').validity.patternMismatch) // false
  console.log(document.getElementById('inp2').validity.patternMismatch) // true
</script>

rangeOverflow

一个 Boolean，true 表示值已超过 max 属性规定的最大值，false 则表示小于或等于这个最大值。true 的时候元素可用 CSS 伪类 :invalid 和 :out-of-range 匹配。

<input id="inp1" type="number" value="1" max="2" />
<input id="inp2" type="number" value="3" max="2" />
<script>
  console.log(document.getElementById('inp1').validity.rangeOverflow) // false
  console.log(document.getElementById('inp2').validity.rangeOverflow) // true
</script>

rangeUnderflow

一个 Boolean，true 表示值小于 min 属性规定的最小值，false 则表示大于或等于这个最小值。true 的时候元素可用 CSS 伪类 :invalid 和 :out-of-range 匹配。

<input id="inp1" type="number" value="3" min="2" />
<input id="inp2" type="number" value="1" min="2" />
<script>
  console.log(document.getElementById('inp1').validity.rangeUnderflow) // false
  console.log(document.getElementById('inp2').validity.rangeUnderflow) // true
</script>

stepMismatch

一个 Boolean，true 表示值不符合由 step 属性规定的规则（即该值不能被步长值除尽，译注：假设最小值是 0）。false 表示其符合步长值规则。true 的时候元素可用 CSS 伪类 :invalid 和 :out-of-range 匹配。

<input id="inp1" type="number" value="4" min="2" max="6" step="2" />
<input id="inp2" type="number" value="3" min="2" max="6" step="2" />
<script>
  console.log(document.getElementById('inp1').validity.stepMismatch) // false
  console.log(document.getElementById('inp2').validity.stepMismatch) // true
</script>

tooLong

一个 Boolean，true 表示值超过了 HTMLInputElement 或 HTMLTextAreaElement 对象中规定的 maxlength， false 表示值的长度小于或等于最大长度。注意：这个属性在 Gecko 中永远不会是 true，因为元素值不允许比 maxlength 长。true 的时候元素可用 CSS 伪类 :invalid 和 :out-of-range 匹配。

<input id="inp1" type="text" value="1234" />
<input id="inp2" type="text" value="A1" pattern="[a-z]{2}" />
<script>
  console.log(document.getElementById('inp1').validity.patternMismatch) // false
  console.log(document.getElementById('inp2').validity.patternMismatch) // false
</script>

为什么第二个 console.log 没有按照预期输出 true？核心问题出在对 input 元素的 maxlength 属性和 validity.tooLong 校验规则的理解上。

问题原因分析

首先要明确两个关键规则：

1. maxlength 的作用：它是限制用户输入的规则，而不是校验元素初始 value 的规则。浏览器会阻止用户输入超过 maxlength 长度的内容，但不会主动修改元素的初始 value。
2. validity.tooLong 的触发条件：这个属性返回 true 的前提是：
   • 元素设置了 maxlength；
   • 用户主动输入/修改了内容，且内容长度超过 maxlength；
   • 仅靠初始 value 超长，不会触发 tooLong = true（这是浏览器的默认行为，目的是兼容已有内容）。

inp2 的初始 value="A1"（长度2）超过了 maxlength="1"，但因为这是初始值而非用户输入，所以 validity.tooLong 仍然返回 false，而非预期的 true。

验证与解决方案

<input id="inp1" type="text" value="A" maxlength="10" />
<input id="inp2" type="text" value="A111" maxlength="1" />
<script>
 console.log(document.getElementById('inp1').validity.tooLong) // false
 console.log(document.getElementById('inp2').validity.tooLong) // true
 const userInput = document.getElementById('inp2')

userInput.addEventListener('input', () => {
   userInput.reportValidity()
   console.log(userInput.validity.tooLong)
 })
</script>

tooShort

一个 Boolean，true 表示值的长度小于 HTMLInputElement 或 HTMLTextAreaElement 对象中规定的 minlength， false 表示值的长度大于或等于最大长度。true 的时候元素可用 CSS 伪类 :invalid 和 :out-of-range 匹配。

typeMismatch

一个 Boolean，true 表示元素值不满足所需的格式（可见于 type 是 email 或 url 时），false 表示格式正确。true 的时候元素可用 CSS 伪类 :invalid 匹配。

<!-- 合法邮箱 -->
<input id="email1" type="email" value="test@example.com" />
<!-- 非法邮箱（无@） -->
<input id="email2" type="email" value="test.example.com" />
<!-- 空值 -->
<input id="email3" type="email" value="" />
<script>
  console.log(document.getElementById('email1').validity.typeMismatch) // false
  console.log(document.getElementById('email2').validity.typeMismatch) // true
  console.log(document.getElementById('email3').validity.typeMismatch) // false （空值不触发类型不匹配）
</script>

valid

一个 Boolean，true 表示元素满足所有的验证约束，因此被认为时有效的，false 表示有任一约束不满足。true 的时候元素可用 CSS 伪类 :valid 匹配，否则可用 CSS 伪类 :invalid 匹配。

valueMissing

一个 Boolean， true 表示元素拥有 required 属性，但没有值，否则为 false。true 的时候元素可用 CSS 伪类 :invalid 匹配。

<input id="inp1" type="text" value="foo" required />
<input id="inp2" type="text" value="" required />
<script>
  console.log(document.getElementById('inp1').validity.valueMissing) // false
  console.log(document.getElementById('inp2').validity.valueMissing) // true
</script>