element 修改表单值后表单验证无效_javascript自学记录：表单脚本1

第14章 表单脚本

14.1 表单的基础知识

​获得表单元素：

// 取得id为form_1的元素var form = document.getElementById("form_1");// 得到第一个表单元素var firstForm = document.forms[0];// 得到名称为test的formvar myForm = document.forms["test"];

14.1.1 提交表单

以下三种类型的按钮可以提交表单：

提交

按钮点击后，会调用submit事件，检验代码则放在此处。

var form = document.getElementById("form_1");EventUtil.addHandler(form,"submit",function (event) {    event = EventUtil.getEvent(event);    EventUtil.preventDefault(event);});

在使用另一个js中的函数时，要注意在HTML中引入外部JS文件顺序，我在调用时将函数所在的js放在了后方，结果函数没有起使用，对于我这样的新手是容易引起这样的错误的。

在代码中可以使用form.submit()方法来提交而不用点击按钮。

防止重复提交的方法：

• 第一提交后禁用按钮；
• 利用onsubmit事件处理程序取消后续的表单提交操作。

14.1.2 重置表单

以下两种类型的按钮可以重置表单：

重置

单击重置按钮时，会触发reset事件。

在代码中可以使用form.reset()方法来重置表单，不过调用方法也会产生reset事件。

14.1.3 表单字段

表单中元素的访问：

var form = document.getElementById("form_1");// 使用序号的方式访问var field1 = form.elements[0];// 使用name方式访问var field2 = form.elements['secondText'];// 得到表单中包含字段的数量var fieldCount = form.elements.length;

像radio这种多个控件使用相同的name，使用序号访问的话，每次会得到一个控件，但如果通过name访问的话，那就会得到一个nodelist。

1、共有的表单控件属性

• disabled 布尔值/当前控件是否被禁用
• form 指向当前字段所属表单的指针，只读
• name 名称
• readOnly 布尔值/是否只读
• tabIndex 切换序号
• type 控件类型
• value 将被提交给服务器的值。

除form属性外，其他属性都是可以动态被改变的。

input与button的type可以动态修改，而select的type是只读的。

除fieldset之外，所有表单字段都有type属性：

select

select-one

select multiple

select-multiple

button

submit

2、共有的表单字段方法

共用方法：focus()和blur()

input元素，且type是hidden，则focus会出错；

css的display和visibility隐藏了元素，则focus也会出错；

如果元素有autofocus，则不用js代码也会自动获得焦点。

为了保证autofocus正常运行，需要检测浏览器是否支持autofocus：

EventUtil.addHandler(window,"load",function (event) {    var element = document.forms[0],elements[0];    if (element.autofocus !== true){        element.focus();        console.log("JS focus");    }});

3、共有的表单字段事件

blur 失去焦点

change input和textarea，在失去焦点且value值改变时触发；select则其选项改变时触发。

focus 获得焦点

下面代码演示了blur和focus以及change效果：

var textbox = document.forms[0].elements[0];EventUtil.addHandler(textbox,"focus",function (event) {    event = EventUtil.getEvent(event);    var target = EventUtil.getTarget(event);    if (target.style.backgroundColor != "red"){        target.style.backgroundColor = "yellow";    }});EventUtil.addHandler(textbox,"blur",function (event) {    event = EventUtil.getEvent(event);    var target = EventUtil.getTarget(event);    if (/[^d]/.test(target.value)){        target.style.backgroundColor = "red";    } else {        target.style.backgroundColor = "";    }});EventUtil.addHandler(textbox,"change",function (event) {    event = EventUtil.getEvent(event);    var target = EventUtil.getTarget(event);    if (/[^d]/.test(target.value)){        target.style.backgroundColor = "red";    } else {        target.style.backgroundColor = "";    }});