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特性相同的值
JavaScript高级程序设计55.pdf的更多相关文章
- JavaScript高级程序设计61.pdf
JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...
- JavaScript高级程序设计60.pdf
错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...
- JavaScript高级程序设计58.pdf
15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...
- JavaScript高级程序设计57.pdf
表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...
- JavaScript高级程序设计54.pdf
过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...
- JavaScript高级程序设计53.pdf
共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...
- JavaScript高级程序设计52.pdf
表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...
- JavaScript高级程序设计50.pdf
hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发 ...
- JavaScript高级程序设计49.pdf
HTML5事件 contextmenu事件 contextmenu事件是冒泡的,可以将事件处理程序指定到document,这个事件的目标是用户操作的元素,在兼容DOM的浏览器中使用event.prev ...
随机推荐
- 九度OJ 1086 最小花费--动态规划
题目地址:http://ac.jobdu.com/problem.php?pid=1086 题目描述: 在某条线路上有N个火车站,有三种距离的路程,L1,L2,L3,对应的价格为C1,C2,C3.其对 ...
- YII 开启URL伪静态
1.开启apache的mode_rewrite模块 去掉LoadModule rewrite_module modules/mod_rewrite.so前的“#”符号 确保<Directory ...
- apache虚拟主机安装注意事项
apache虚拟主机在添加的时候,总是会有一些莫名其妙的问题,后来发现可以使用一个参数去验证的: xxxxx/httpd -S //这个参数会去检查虚拟主机配置的正确性,很好用 因为有时候可能就是缩进 ...
- js与uri中location关系
//获取域名host = window.location.host;host2=document.domain; //获取页面完整地址url = window.location.href; docum ...
- php发送http请求
http请求有get,post. php发送http请求有三种方式[我所知道的有三种,有其他的告诉我]. file_get_contents();详情见:http://www.cnblogs.com/ ...
- 【python之路6】pycharm的使用
1.pycharm简介 PyCharm 是我众多python编辑器中比较好的一个.而且可以跨平台,在macos和windows下面都可以用,这点比较好. PyCharm是一种Python IDE,带有 ...
- jquery 判断是否 ie6 ie7 ie8
var isIE = !!window.ActiveXObject; var isIE6 = isIE && !window.XMLHttpRequest; var isIE8 = ...
- SQL2005 安装时 “性能监视器计数器要求(错误)” 解决方案
转自SQL2005 安装时 "性能监视器计数器要求(错误)" 解决方案 出现此类问题一般都是在非法卸载sql2005出现的 在 "开始" --> &qu ...
- 如何解决C#编译中"csc不是内部或外部命令"的问题
安装完 VisualStudio 2010编译环境后,是不能用命令行直接编译写好的csc文件的,如果不配置环境变量,在命令提示符(cmd)中编译扩展名为cs的文件,会出现错误提示“csc不是内部或外部 ...
- C++内存管理(超长,例子很详细,排版很好)
[导语] 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的检查代码和对C++的痛恨,但内存管理在C++中无处不 ...