JavaScript 表单脚本——“表单的基础知识”的注意要点

chnmagnus 发布于2019-08-19 17:26 / 1129人阅读

摘要：处理表格和提交等等重置表单重置表单应该使用或当用户单击重置按钮重置表单时，会触发事件，可以在必要的时候取消重置操作另外也可以通过脚本调用方法重置表单，在调用方法重置表单时会触发事件。在中，表单中新增加了属性，自动把焦点移动到相应字段。

HTMLFormElement继承了HTMLElement，它自己独有的属性和方法有：

acceptCharset:服务器能够处理的字符集，等价于HTML的accept-charset特性

action：接收请求的URL，等价于HTML中的action特性。

elements：表单中所有控件的集合（HTMLCollection）

enctype：请求的编码类型

length：表单中控件的数量

method:要发送的HTTP请求类型，通常是get或post

name：表单的名称

reset():将所有表单域重置为默认值

submit():提交表单

target:用于发送请求和接收响应的窗口名称；

取得form元素的引用可以是getElementById、也可以是document.forms中数值索引或name值；

提交表单

提交表单的按钮有三种：

以上面这种方法提交表单会在浏览器请求发送给服务器之前触发submit事件，这样就可以验证表单数据和决定是否允许提交表单，如下面的代码就可以阻止表单的提交：

var form = document.getElementById("myForm");
form.addEventListener("submit", function () {
    event.preventDefault();
});

另外也可以通过js脚本调用submit()方法提交表单，在调用submit()提交表单不会触发submit事件。

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

第一次提交表单后如果长时间没有回应，用户会变得不耐烦，往往多次点击提交按钮，导致重复提交表单，因此应该在第一次提交表单后就禁用提交按钮或利用onsubmit事件阻止后续操作。

var submitBtn = document.getElementById("submitBtn");
submitBtn.onclick = function () {
    //处理表格和提交等等
    submitBtn.disabled = true;
};

重置表单

重置表单应该使用input或button：

当用户单击重置按钮重置表单时，会触发reset事件，可以在必要的时候取消重置操作：

var resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("reset", function () {
    event.preventDefault();
});

另外也可以通过js脚本调用reset()方法重置表单，在调用reset()方法重置表单时会触发reset事件。

var form = document.getElementById("myForm");
form.reset();

表单字段

每个表单都有一个elements属性，该属性是表单中所有表单（字段）的集合：

var form = document.forms["myForm"];
var list = [];
//取得表单中第一个字段
var firstName = form.elements[0];
list.push(firstName.name);
//取得表单中名为lastName的字段
var lastName = form.elements["lastName"];
list.push(lastName.name);
// 取得表单中包含的字段的数量
var fieldCount = form.elements.length;
list.push(fieldCount);
console.log(list.toString()); //firstName,lastName,4

多个表单控件使用一个name（单选按钮），那么会返回以该name命名的NodeList：


    
        red
        yellow
        blue

name都是color，在访问elements["color"]时，返回NodeList：

var list = [];
var form = document.forms["myForm"];
var radios = form.elements["color"];
console.log(radios.length) //3

共有的表单字段属性

disabled: 布尔值，表示当前字段是否被禁用；

form: 指向当前字段所属表单的指针：只读；

name: 当前字段的名称；

readOnly: 布尔值，表示当前字段是否只读；

tabIndex: 表示当前字段的切换（tab）序号；

type: 当前字段的类型；

value: 当前字段被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径；

可通过submit事件在提交表单后禁用提交按钮，但不可以用onclick事件，因为onclick在不同浏览器中有“时差”；

共有表单字段方法

focus(): 激活字段，使其可以响应键盘事件；

blur(): 失去焦点，触发；使用的场合不多；

可以在侦听页面的load事件上添加该focus()方法：

window.addEventListener("load", function () {
    document.forms["myForm"].elements["lastName"].focus();
});

需要注意，第一个表单字段是input，如果其type特性为“hidden”，或者css属性的display和visibility属性隐藏了该字段，就会导致错误。

在HTML5中，表单中新增加了autofocus属性，自动把焦点移动到相应字段。

autofocus

如：

或者检测是否设置了该属性，没有的话再调用focus()方法：

window.addEventListener("load", function () {
    var form = document.forms["myForm"];
    if (form["lastName"].autofocus !== true) {
        form["lastName"].focus();
    };
});

共有的表单字段事件

除了支持鼠标键盘更改和HTML事件之外，所有的表单字段都支持下列3个事件：

blur：当前字段失去焦点时触发；

change：input元素和textarea元素，在它们失去焦点且value值改变时触发；select元素在其选项改变时触发（不失去焦点也会触发）；

focus：当前字段获得焦点时触发；

如：

var form = document.forms["myForm"];
var firstName = form.elements["firstName"];

firstName.addEventListener("focus", handler);
firstName.addEventListener("blur", handler);
firstName.addEventListener("change", handler);

function handler() {
    switch (event.type) {
        case "focus":
            if (firstName.style.backgroundColor !== "red") {
                firstName.style.backgroundColor = "yellow";

            };
            break;
        case "blur":
            if (event.target.value.length < 1) {
                firstName.style.backgroundColor = "red";
            } else {
                firstName.style.backgroundColor = "";
            };
            break;
        case "change":
            if (event.target.value.length < 1) {
                firstName.style.backgroundColor = "red";
            } else {
                firstName.style.backgroundColor = "";
            };
            break;
    }
}

GPU云服务器云服务器云主机的要点深度学习的要点脚本javascript javascript脚本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78511.html

表单验证（-）

摘要：这样我们就有机会验证表单数据，并据以决定是否允许表单提交。下面代码会阻止表单提交取得时间对象阻止默认事件注意以这种方式提交表单，不会触发事件。这里是表单验证的第一课：主要讲授有关表单的基础知识。关于表单验证的更多知识可以参考《javascript高级程序设计》之第14章：表单脚本 1.表单事件 submit():提交表单reset():将所有表单域重置为默认值（1）.取得form元...

cppowboy 2019-08-21 14:18 评论0 收藏0
JavaScript 表单脚本——“表单序列化”的注意要点

摘要：浏览器如何将数据发送给服务器对表单字段的名称和值进行编码，使用和号分隔不发送禁用的表单字段只发送勾选的复选框和单选按钮不发送为和的按钮多选框中每个选中的值单独一个条目在单击提交按钮提交表单的情况下，也会发送提交按钮。否则不发送提交按钮。浏览器如何将数据发送给服务器：对表单字段的名称和值进行URL编码，使用和号（&）分隔不发送禁用的表单字段只发送勾选的复选框和单选按钮不发送t...

BlackHole1 2019-08-19 17:29 评论0 收藏0
高程3总结#第14章表单脚本

表单脚本表单的基础知识 HTMLFormElement有自己独特的属性和方法 acceptCharset，服务器能够处理的字符集，等价于HTML中的accept-charset特性 action，接受请求的URL，等价于HTML中的action特性 elements，表单中所有控件的集合 enctype，请求的编码类型，等价于HTML中的enctype特性 length，表单中控件的数量 m...

Tony 2019-08-23 12:04 评论0 收藏0
JavaScript 表单脚本——“选择框脚本”的注意要点

摘要：为了便于访问，对象添加了下列属性当前项在集合中的索引当前选项的标签，等价于中的标签布尔值，表示当前选项是否被选中。选择框通过select和option元素创建的。除了共有的属性和方法外，下面的是特有的属性和方法： add(newOption,relativeOption): 向控件中插入新元素，其位置相关项relativeOption之前 multiple: 布尔值，表示是否允许多...

vvpvvp 2019-08-19 17:29 评论0 收藏0
JavaScript 表单脚本——“文本框脚本”的注意要点

摘要：属性可以设置文本框的初始值。特性则是用于指定文本框内可以接受的最大字符数。与这个方法对应的事件，在选择了文本框中的文本时事件触发。如阻止用户选择要调用之前或之后立即将焦点设置到文本框。在HTML中，有两种方式来表现文本框：一种是使用input元素的单行文本，另一种是使用textarea的多行文本框。使用input方式，必须添加type，设置为text。 size特性，可以指定文...

kk_miles 2019-08-19 17:27 评论0 收藏0