JS中的表单脚本

漂流の少年

已于 2022-05-30 14:47:25 修改

阅读量414

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： js javascript 表单脚本

于 2022-05-28 21:45:39 首次发布

本文链接：https://blog.csdn.net/YINZHE__/article/details/125021685

版权

HTML+CSS+JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.获取表单

// 利用表单的id属性
let form = document.getElementById("form1");
//  document.forms 集合可以获取页面上所有的表单元素
let firstForm = document.forms[0]; // 取得页面中的第一个表单
let myForm = document.forms["form2"]; // 取得名字为"form2"的表单

2.提交表单

<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图片按钮 -->
<input type="image" src="graphic.gif">

在JS中提交

let form = document.getElementById("myForm");
form.submit(); // 提交表单

验证表单数据，根据验证结果决定是否提交

let form = document.getElementById("myForm");
form.addEventListener("submit", (event) => {
    // 阻止表单提交
    event.preventDefault();
});

表单提交的问题：可能会多次提交表单
解决：在表单提交后禁用提交按钮，或者通过 onsubmit 事件处理程序取消之后的表单提交。

let form = document.getElementById("myForm");
form.addEventListener("submit", (event) => {
    let target = event.target;
    let btn = target.elements["submit-btn"]; // 取得提交按钮
    btn.disabled = true; // 禁用提交按钮
});

3.重置表单

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>

在JS中重置

let form = document.getElementById("myForm");
form.reset(); // 重置表单

阻止重置

let form = document.getElementById("myForm");
form.addEventListener("reset", (event) => {
    event.preventDefault();
});

4.表单字段

表单元素可以像页面中的其他元素一样使用原生 DOM 方法来访问。
elements 集合是一个有序列表，包含对表单中所有表单元素的引用(<input> 、<textarea> 、 <button> 、 <select> 和 <fieldset>)。

let form = document.getElementById("form1");
let field1 = form.elements[0]; // 取得表单中的第一个字段
let field2 = form.elements["textbox1"]; // 取得表单中名为"textbox1"的字段
let fieldCount = form.elements.length; // 取得字段的数量

如果多个表单控件使用了同一个 name ，比如像单选框那样

<form method="post" id="myForm">
    <ul>
        <li><input type="radio" name="color" value="red">Red</li>
        <li><input type="radio" name="color" value="green">Green</li>
        <li><input type="radio" name="color" value="blue">Blue</li>
    </ul>
</form>

let form = document.getElementById("myForm");
let colorFields = form.elements["color"];
console.log(colorFields.length); // 3

表单字段的公共属性

除 <fieldset> 元素以外，所有表单字段都有一组同样的属性。常用的：disabled、form (指针，指向表单字段所属的表单。只读的)、name (字符串，这个字段的名字）、type (字符串，表示字段类型，如 "checkbox" 、 "radio" 等)
这些属性可以利用JS进行动态修改。

表单字段的公共方法

focus() ：把浏览器焦点设置到表单字段
在页面加载后把焦点定位到表单中第一个字段

window.addEventListener("load", (event) => {
    document.forms[0].elements[0].focus();
});

blur() ：从元素上移除焦点

document.forms[0].elements[0].blur();

表单字段的公共事件

blur ：在字段失去焦点时触发。
change ：在 <input> 和 <textarea> 元素的 value 发生变化且失去焦点时触发，或者在<select> 元素中选中项发生变化时触发。
focus ：在字段获得焦点时触发

文本框：单行使用 <input> 元素，多行使用 <textarea> 元素

<!--文本框一次可显示 25 个字符，但最多允许显示 50 个字符-->
<input type="text" size="25" maxlength="50" value="initial value">
<!--文本框高度为25个字符数，宽度为5个字符数，但在html中无法指定最大允许的字符数-->
<textarea rows="25" cols="5">initial value</textarea>

两种文本框都支持一个名为 select() 的方法，此方法用于全部选中文本框中的文本。
只要文本框一获得焦点就会自动选中其中的所有文本

textbox.addEventListener("focus", (event) => {
    event.target.select();
});

取得选中文本：select() 和 setSelectionRange()

// selectionStart和selectionEnd这两个属性分别表示文本选区的起点和终点
function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}

textbox.value = "Hello world!"
// 选择所有文本
textbox.setSelectionRange(0, textbox.value.length); // "Hello world!"
// 选择前 3 个字符
textbox.setSelectionRange(0, 3); // "Hel"
// 选择第 4~6 个字符
textbox.setSelectionRange(4, 7); // "o w"

5.过滤输入

屏蔽字符

// 屏蔽所有按键的输入
textbox.addEventListener("keypress", (event) => {
    event.preventDefault();
});
// 屏蔽非数字字符和ctrl键，避免屏蔽常用键
textbox.addEventListener("keypress", (event) => {
    if (!/\d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 &&    !event.ctrlKey){
        event.preventDefault();
    }
});

6.自动切换焦点

<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">

<script>
function tabForward(event){
    let target = event.target;
    if (target.value.length == target.maxLength){
        let form = target.form;
        for (let i = 0, len = form.elements.length; i < len; i++) {
            if (form.elements[i] == target) {
                if (form.elements[i+1]) {
                    form.elements[i+1].focus();
                }
                return;
            }
        }
    }
}

let inputIds = ["txtTel1", "txtTel2", "txtTel3"];
for (let id of inputIds) {
    let textbox = document.getElementById(id);
    textbox.addEventListener("keyup", tabForward);
}
</script>

7.选择框

选择框是使用 <select> 和 <option> 元素创建的。
选择框的 type 属性可能是 "select-one" 或 "select-multiple" ，具体取决于multiple属性是否存在。
选择框的 value 属性根据以下规则决定：
 如果没有选中项，则选择框的值是空字符串。
 如果有一个选中项，且其 value 属性有值，则选择框的值就是选中项 value 属性的值。
 如果有一个选中项，且其 value 属性没有指定值，则选择框的值是该项的文本内容。
 如果有多个选中项，则选择框的值根据2、3两条规则取得第一个选中项的值。

<select name="location" id="selLocation">
    <option value="Sunnyvale, CA">Sunnyvale</option>
    <option value="Los Angeles, CA">Los Angeles</option>
    <option value="Mountain View, CA">Mountain View</option>
    <option value="">China</option>
    <option>Australia</option>
</select>

①在JS中操作选择框

let selectbox = document.forms[0].elements["location"];

let text = selectbox.options[0].text; // 选项文本
let value = selectbox.options[0].value; // 选项值

②获取选中项

对于只允许选择一项的选择框，可使用选择框的 selectedIndex 属性
对于允许多选的选择框，获取 selectedIndex 只会返回选中的第一项的索引

let selectedIndex = selectbox.selectedIndex;
let selectedOption = selectbox.options[selectedIndex];
console.log(`Selected index: ${selectedIndex}\n` +
`Selected text: ${selectedOption.text}\n` +
`Selected value: ${selectedOption.value}`);

另一种，选项还可以通过取得选项的引用并将其 selected 属性设置为 true 来选中

// 返回选择框中所有选中项的数组
function getSelectedOptions(selectbox){
    let result = new Array();
    for (let option of selectbox.options) {
        if (option.selected) {
            result.push(option);
        }
    }
    return result;
}

③添加选项

DOM 方法

let newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

使用 Option 构造函数创建新选项

let newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption); // 在 IE8 及更低版本中有问题

使用选择框的 add() 方法

接收两个参数：要添加的新选项和要添加到其前面的参考选项。

let newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined); // 添加到列表末尾

④移除选项

// 使用 DOM 的 removeChild() 方法
selectbox.removeChild(selectbox.options[0]); // 移除第一项
// 使用选择框的 remove() 方法
selectbox.remove(0); // 移除第一项
// 直接将选项设置为等于 null
selectbox.options[0] = null; // 移除第一项
// 清除选择框的所有选项
function clearSelectbox(selectbox) {
    for (let option of selectbox.options) {
        selectbox.remove(0);
    }
}

⑤移动和重排选项

从第一个选择框移除选项，再将其添加到第二个选择框:appendChild()

// 使用 appendChild(),传入文档中已有的元素,该元素会先从其父元素中移除,然后再插入指定位置
let selectbox1 = document.getElementById("selLocations1");
let selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);

选项移动到选择框中的特定位置:insertBefore()

// 将一个选项在选择框中前移一个位置
let optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index-1]);
// 将选项向下移动一个位置
let optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index+2]);