JavaScript 可以通过很多方式来增强表单字段的易用性。最常用的是在当前字段完成时自动切换到 下一个字段。对于要收集数据的长度已知(比如电话号码)的字段是可以这样处理的。在美国,电话号 码通常分为 3 个部分:区号、交换局号,外加 4 位数字。在网页中,可以通过 3 个文本框来表示这几个 部分,比如:
<input type="text" name="tel2" id="txtTel2" maxlength="3"> 20
<input type="text" name="tel3" id="txtTel3" maxlength="4">
为增加这个表单的易用性并加速数据输入,可以在每个文本框输入到最大允许字符数时自动把焦点 切换到下一个文本框。因此,当用户在第一个文本框中输入 3 个字符后,就把焦点移到第二个文本框, 21 当用户在第二个文本框中输入 3 个字符后,把焦点再移到第三个文本框。这种自动切换文本框的行为可 以通过如下代码实现:
<script> 22 function tabForward(event){
<input type="text" name="tel1" id="txtTel1" maxlength="3">
let target = event.target;
if (target.value.length == target.maxLength){
let form = target.form;
for (let i = 0, len = form.elements.length; i < len; i++) {
if (form.elements[i] == target) {
if (form.elements[i+1]) {
form.elements[i+1].focus();
}
return; }
} }
}
let inputIds = ["txtTel1", "txtTel2", "txtTel3"];
for (let id of inputIds) {
let textbox = document.getElementById(id);
textbox.addEventListener("keyup", tabForward);
}
let textbox1 = document.getElementById("txtTel1");
let textbox2 = document.getElementById("txtTel2");
let textbox3 = document.getElementById("txtTel3");
</script>
表单脚本
这个 tabForward()函数是实现自动切换的关键。它通过比较用户输入文本的长度与 maxlength 属性的值来检测输入是否达到了最大长度。如果两者相等(因为浏览器会强制最大字符数,所以不可能 出现多的情况),那么就要通过循环表单中的元素集合找到当前文本框,并把焦点设置到下一个元素。 这个函数接着给每一个文本框都指定了 onkeyup 事件处理程序。因为 keyup 事件会在每个新字符被插 入到文本框中时触发,所以此时应该是检测文本框内容长度的最佳时机。在填写这个简单的表单时,用 户不用按 Tab 键切换字段和提交表单。
不过要注意,上面的代码只适用于之前既定的标记,没有考虑可能存在的隐藏字段。
HTML5 约束验证 API
HTML5 为浏览器新增了在提交表单前验证数据的能力。这些能力实现了基本的验证,即使 JavaScript 不可用或加载失败也没关系。这是因为浏览器自身会基于指定的规则进行验证,并在出错时显示适当的 错误消息(无须 JavaScript)。这些能力只有支持 HTML5 这部分的浏览器才有,包括所有现代浏览器(除 了 Safari)和 IE10+。
验证会根据某些条件应用到表单字段。可以使用 HTML 标记指定对特定字段的约束,然后浏览器 会根据这些约束自动执行表单验证。
必填字段
第一个条件是给表单字段添加 required 属性,如下所示:
<input type="text" name="username" required>
任何带有 required 属性的字段都必须有值,否则无法提交表单。这个属性适用于、 和字段(Opera 直到版本 11 都不支持的 required 属性)。可以通过 JavaScript 检测对应元素的 required 属性来判断表单字段是否为必填:
let isUsernameRequired = document.forms[0].elements["username"].required;
还可以使用下面的代码检测浏览器是否支持 required 属性:
let isRequiredSupported = "required" in document.createElement("input");
这行代码使用简单的特性检测来确定新创建的元素上是否存在 required 属性。
注意,不同浏览器处理必填字段的机制不同。Firefox、Chrome、IE 和 Opera 会阻止表单提交并在相 应字段下面显示有帮助信息的弹框,而 Safari 什么也不做,也不会阻止提交表单。
更多输入类型
HTML5 为元素增加了几个新的 type 值。这些类型属性不仅表明了字段期待的数据类型, 而且也提供了一些默认验证,其中两个新的输入类型是已经得到广泛支持的"email"和"url",二者都 有浏览器提供的自定义验证。比如:
<input type="email" name="email">
<input type="url" name="homepage">
“email"类型确保输入的文本匹配电子邮件地址,而"url"类型确保输入的文本匹配 URL。注意, 浏览器在匹配模式时都存在问题。最明显的是文本”-@-“会被认为是有效的电子邮件地址。浏览器厂商 仍然在解决这些问题。
要检测浏览器是否支持这些新类型,可以在 JavaScript 中新创建一个输入元素并将其类型属性设置 为"email"或"url”,然后再读取该元素的值。老版本浏览器会自动将未知类型值设置为"text",而支持的浏览器会返回正确的值。比如:
let input = document.createElement("input");
input.type = "email";
let isEmailSupported = (input.type == "email");
对于这两个新类型,除非应用了 required 属性,否则空字段是有效的。另外,指定一个特殊输入 类型并不会阻止用户输入无效的值。新类型只是会应用一些默认验证。
数值范围
除了"email"和"url",HTML5 还定义了其他几种新的输入元素类型,它们都是期待某种数值输 入的,包括:“number”、“range”、“datetime”、“datetime-local”、“date”、“month”、“week” 和"time"。并非所有主流浏览器都支持这些类型,因此使用时要当心。浏览器厂商目前正致力于解决 兼容性问题和提供更逻辑化的功能。本节内容更多地是介绍未来趋势,而不是讨论当前就能用的功能。
对上述每种数值类型,都可以指定 min 属性(最小可能值)、max 属性(最大可能值),以及 step 属性(从 min 到 max 的步长值)。例如,如果只允许输入 0 到 100 中 5 的倍数,那么可以这样写:
<input type="number" min="0" max="100" step="5" name="count">
根据浏览器的不同,可能会也可能不会出现旋转控件(上下按钮)用于自动增加和减少。
上面每个属性在 JavaScript 中也可以通过对应元素的 DOM 属性来访问和修改。此外,还有两个方 法,即 stepUp()和 stepDown()。这两个方法都接收一个可选的参数:要从当前值加上或减去的数 值。(默认情况下,步长值会递增或递减 1。)虽然浏览器还没有实现这些方法,但可以先看一下它们的 用法:
input.stepUp(); input.stepUp(5); input.stepDown(); input.stepDown(10); // 减10