我们就爱程序媛让前端飞Web前端之路

Javascript知识整理——表单脚本

2017-09-16  本文已影响73人  俗三疯

表单的基础知识

在Javascirpt中,表单元素<form>对应的是HTMLFormElement类型,继承了的是Element类型,有自己独有的属性和方法:

取得<form>元素引用的方式
var firstForm = document.forms[0];
var myForm = document.forms["form2"];


提交表单
\<input type="submit" value="Submit Form">
\<button type="submit">Submit Form</button>
\<input type="image" src='graphic.gif'>

上面三种按钮只要存在在form表单中,那么在相应表单控件拥有焦点的情况下,按回车就可以提交表单(textarea例外),触发表单的submit事件,通常需要自定义submit事件,因此需要经常阻止表单提交来进行相应的检查。

var form = document.getElementById("myForm")
form.submit()

注意以上这种方式提交表单是,不会触发submit事件,因此要记得在调用此方法之前先验证表单数据。

重置表单
\<input type="reset" value="reset Form">
\<button type="reset">reset Form</button>
表单字段

每个表单都有docuement属性,是表单中所有表单元素(字段)的集合,顺序与出现在标记中的顺序对应,可以按照位置和name特性来访问它们

var form = document.getElementById('form1')
var field1 = form.elements[0]
var field2 = form.elements['textbox1']
var fieldCount = form.elements.length

如果多个表单控件都在使用一个name,就会返回以该name命名的一个NodeList

文本框脚本


选择文本
过滤输入
自动切换焦点

原理是判断事件对象的value.length和maxlength是否相等来进行焦点切换

HTML5约束验证API

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

选择框脚本

选择框是通过select和option元素床架你的,为了与这个控件交互,除了所有表单共有的属性和方法外,还提供如下特殊的属性和方法:

选择该项
var selectedOpotion = selectbox.options[selctebox.selectedIndex]
添加选项
移除选项

表单序列化

随着Ajax的出现,表单序列化已经是很常见的一种需求
浏览器将数据发送给服务器的过程:

serialize的源码参考高程三一书p436页

以上参考红宝书《高程三》
上一篇 下一篇

猜你喜欢

热点阅读