JS中的表单脚本

Posted 2022-06-07 劳埃德·福杰

目录

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]);