JavaScript高级程序设计55.pdf

输入模式

HTML5为文本字段新增了pattern属性，这个属性的值是一个正则表达式，用于匹配文本框中的值

例如，只想在允许在文本字段中输入数值

<input type="text" pattern="\d+" name="count">

注意，模式的开头和结尾不用加^和$符号（假定已经有了），这两个符号表示输入的值必须从头到尾与模式匹配

与其他输入类型相似，指定的pattern也不能阻止用户输入无效的文本，。这个模式应用给值，浏览器来判断值是否有效，在Javascript中可以通过pattern属性访问模式

var pattern=document.forms[0].elements["count"].pattern;

检测浏览器是否支持pattern属性

var isPatternSupported="pattern" in document.createElement("input");

检测有效性

checkValidity()方法可以检测表单中某个字段是否有效，检测的依据是之前介绍过的那些约束

if(document.forms[0].element[0].checkValidity()){

　　//字段有效时执行的代码

　　}else{

　　//字段无效时执行的代码

　　}

checkValidity()反馈字段是否有效，而validity对象反馈字段的有效或无效原因，其包含一系列属性，每个属性返回一个布尔值

customError：如果设置了setCustomValidity()，则为true，否则返回false

patternMismatch:如果值与指定的pattern属性不匹配，返回true

rangeOverflow:如果值比max大，返回true

rangeUnderflow:如果值比min小，返回true

stepMisMatch:如果min和max之间的步长值设置不合理，返回true

toolong:如果值得长度超过了maxlength属性指定的长度，返回true，有的浏览器（Firefox4）会自动约束字符数量，因此这个值永远都返回false

typeMismatch:如果值不是“mail”或“url”，返回true

valid:如果这里的其他属性都是false，返回true

valueMissing:如果标注为required的字段没有值，返回true

if(input.validity && !input.validity.valid){

　　　　if(input.validity.valueMissing){

　　　　　　　　//执行一段代码

　　　　　　}

　　}

禁用验证

设置novalidate属性，告诉表单不进行验证

<form method="post" action="signup.php" novalidate>

　　<!--插入表单元素-->

</form>

如果一个表单中有多个提交按钮，指定某个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate属性

<input type="submit" formnovalidate name="btnNoValidate">

选择框脚本

选择框通过<select>和<option>元素创建，除了所有表单字段共有的属性和方法外，HTMLSelectElement类型还提供了下列属性和方法

add(newOption,relOption):向控件中添加新的<option>元素，其位置在（relOption）之前

multiple:布尔值，表示是否允许多项选择；等价于HTML中的multiple特性

options:控件中所有<option>元素的HTMLCollection

remove(index):移除给定位置的选项

selectedIndex:基于0的选中项的索引，如果没有选中项，则值为-1，对于支持多选的控件，只保存选中项中第一项的索引

size:选择框中可见的行数；等价于HTML中size特性

选择框的type属性不是“select-one”就是“select-multiple”，取决于HTML代码中有没有multiple特性。

选择框的value属性由当前选中项决定的：

没有选中项，value保存空字符串

有一个选中项，该项的value特性已经在HTML中指定，选择框的value属性等于该选中项的value特性

有一个选中项，该项的value特性未在HTML中指定，选择框的value属性等于该选中项的文本

如果有多个选中项，选择框的value属性依据前两条的规则取得第一个选中项的值

在DOM中，每个<option>元素都有一个HTMLOptionElement对象表示，具有下列属性

index：当前选项在options集合中的索引

label：当前选项的标签；等价于HTML中label特性

selected：布尔值，表示当前选项是否被选中，设置为true可以选中当前选项

text：选项的文本

value：选项的值（等价于HTML中的value特性）

还要注意的一点是：选择框的change事件与其他表单字段的change事件触发条件不一样，其他表单字段在值被修改且焦点离开当前字段时触发，而选择框只要选中了选项就会触发

不同浏览器下，选项的value属性返回的值也存在差别，在所有浏览器中，value属性始终等于value特性，未指定value特性的情况下，IE8返回空字符串，其他现代浏览器返回与text特性相同的值