javascript基础从小白到高手系列一千六百七十二：数值范围

除了"email"和"url"，HTML5 还定义了其他几种新的输入元素类型，它们都是期待某种数值输
入的，包括：“number”、“range”、“datetime”、“datetime-local”、“date”、“month”、“week”
和"time"。并非所有主流浏览器都支持这些类型，因此使用时要当心。浏览器厂商目前正致力于解决
兼容性问题和提供更逻辑化的功能。本节内容更多地是介绍未来趋势，而不是讨论当前就能用的功能。
对上述每种数值类型，都可以指定min 属性（最小可能值）、max 属性（最大可能值），以及step
属性（从min 到max 的步长值）。例如，如果只允许输入0 到100 中5 的倍数，那么可以这样写：

根据浏览器的不同，可能会也可能不会出现旋转控件（上下按钮）用于自动增加和减少。
上面每个属性在JavaScript 中也可以通过对应元素的DOM 属性来访问和修改。此外，还有两个方
法，即stepUp()和stepDown()。这两个方法都接收一个可选的参数：要从当前值加上或减去的数
值。（默认情况下，步长值会递增或递减1。）虽然浏览器还没有实现这些方法，但可以先看一下它们的
用法：
input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 减1
input.stepDown(10); // 减10
输入模式
HTML5 为文本字段新增了pattern 属性。这个属性用于指定一个正则表达式，用户输入的文本必
须与之匹配。例如，要限制只能在文本字段中输入数字，可以这样添加模式：

注意模式的开头和末尾分别假设有^和$。这意味着输入内容必须从头到尾都严格与模式匹配。
与新增的输入类型一样，指定pattern 属性也不会阻止用户输入无效内容。模式会应用到值，然
后浏览器会知道值是否有效。通过访问pattern 属性可以读取模式：
let pattern = document.forms[0].elements[“count”].pattern;
使用如下代码可以检测浏览器是否支持pattern 属性：
let isPatternSupported = “pattern” in document.createElement(“input”);
检测有效性
使用checkValidity()方法可以检测表单中任意给定字段是否有效。这个方法在所有表单元素上
都可以使用，如果字段值有效就会返回true，否则返回false。判断字段是否有效的依据是本节前面
提到的约束条件，因此必填字段如果没有值就会被视为无效，而字段值不匹配pattern 属性也会被视
为无效。比如：
if (document.forms[0].elements[0].checkValidity()){
// 字段有效，继续
} else {
// 字段无效
}
要检查整个表单是否有效，可以直接在表单上调用checkValidity()方法。这个方法会在所有字
段都有效时返回true，有一个字段无效就会返回false：
if(document.forms[0].checkValidity()){
// 表单有效，继续
} else {
// 表单无效
}
checkValidity()方法只会告诉我们字段是否有效，而validity 属性会告诉我们字段为什么有
效或无效。这个属性是一个对象，包含一系列返回布尔值的属性。
 customError：如果设置了setCustomValidity()就返回true，否则返回false。
 patternMismatch：如果字段值不匹配指定的pattern 属性则返回true。
 rangeOverflow：如果字段值大于max 的值则返回true。
 rangeUnderflow：如果字段值小于min 的值则返回true。
 stepMisMatch：如果字段值与min、max 和step 的值不相符则返回true。
 tooLong：如果字段值的长度超过了maxlength 属性指定的值则返回true。某些浏览器，如
Firefox 4 会自动限制字符数量，因此这个属性值始终为false。
 typeMismatch：如果字段值不是"email"或"url"要求的格式则返回true。
 valid：如果其他所有属性的值都为false 则返回true。与checkValidity()的条件一致。
 valueMissing：如果字段是必填的但没有值则返回true。
因此，通过validity 属性可以检查表单字段的有效性，从而获取更具体的信息，如下面的代码所示：
if (input.validity && !input.validity.valid){
if (input.validity.valueMissing){
console.log(“Please specify a value.”)
} else if (input.validity.typeMismatch){
console.log(“Please enter an email address.”);
} else {
console.log(“Value is invalid.”);
}
}