js 表单脚本

最新推荐文章于 2024-04-26 16:47:03 发布

飞天巨兽

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量496

点赞数

分类专栏：笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_41538165/article/details/126591804

版权

笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

《JavaScript高级程序设计》读书笔记

表单基础

<form> 元素。HTMLFormElement 类型表示。

属性和方法：

acceptCharset：服务器可以接收的字符集，等价于 HTML 的 accept-charset 属性。
action：请求的 URL，等价于 HTML 的 action 属性。
elements：表单中所有控件的 HTMLCollection。
enctype：请求的编码类型，等价于 HTML 的 enctype 属性。
length：表单中控件的数量。
method： HTTP 请求的方法类型，通常是"get"或"post"，等价于 HTML 的 method 属性。
name：表单的名字，等价于 HTML 的 name 属性。
reset()：把表单字段重置为各自的默认值。
submit()：提交表单。
target：用于发送请求和接收响应的窗口的名字，等价于 HTML 的 target 属性。

引用的3种方式：

let form = document.getElementById("form1");
let firstForm = document.forms[0];    // 获取页面第一个表单
let myForm = document.forms["form2"];    // 取得名字为 “form2” 的表单

提交表单

使用type 属性为“submit” 的<input> 、<button> 或图片。这种方式提交表单会在向服务器发送请求之间触发submit 事件。

let form = document.getElementById('myForm');

form.addEventListener("submit", (event) => {
    // 阻止表单提交
    event.preventDefault();
    // 验证结果
});

// js方式提交表单
form.submit();

重置表单

type 属性为“reset”

表单字段

所有表单元素都是表单element 属性中包含的一个值，按出现次序保存。如果多个表单控件使用了同一个name，使用name获取元素，则会返回NodeList。

let form = document.getElementById("form1");
let field1 = form.elements[0];
let field2 = form.elements["textbox1"];
let fieldCount = form.elements.length;

1. 表单字段的公共属性

disabled：布尔值，表示表单字段是否禁用
form：指针，指向表单字段所属的表单。只读
name：字符串，字段名字
readOnly：布尔值，是否只读
tabIndex：数值，表示这个字段在按Tab键时的切换顺序
type：字符串，字段类型。
value：要提交给服务器的字段值。

这里面除了form属性之外，都可以动态修改。

2. 表单字段的公共方法

focus() 设置焦点，如果给设置了hidden 的input 元素使用会出错。设置autofocus属性，浏览器会自动为其设置焦点
blur() 移出焦点

3. 表单字段的公共事件

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

文本框编程

两种文本框方法：input 和textarea。

input ：size 属性指定文本框的宽度，value 属性指定文本框的初始值，maxLength 属性指定文本框允许的最多字符数。

textarea：rows 属性指定文本框的高度，cols 属性指定以字符数计量的文本框宽度。与input 不同的是，初始值要包含在这个标签之间，不能指定最大允许的字符数

选择文本

select 方法用于全部选中文本框中的文字。target.select()

1. select 事件

当选中文本框中的文本时，会触发。

2. 取得选中文本

分别表示文本选中的起点和终点

selectionStart
selectionEnd

3. 部分选中文本

element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection])

参数：开始位置，结束位置，选择方向的字符串（forward、backward、none）

输入过滤

1. 屏蔽字符

例如：只允许输入数字

textbox.addEventListener("keypress", event => {
    if(!/\d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey) {
        event.preventDefault();
    }
});

2. 处理剪贴板

HTML5 约束验证API

1. 必填字段 required

<input type="text" name="tel1" id="tel1" maxlength="3" required>

2. 更多输入类型

number
range
datetime
datetime-local
date
month
week
time
url
email

<input type="url" />
<input type="email" />

3. 数值范围

<input type="number" min="0" max="100" step="5">

两个方法：stepUp() 和 stepDown()，接受一个加上或减去的数值

4. 输入模式

pattern 属性，用于指定一个正则表达式

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

5. 检测有效性

checkValidity() 方法检测表单中任意给定字段是否有效，返回布尔值。可以调用在单个字段元素中或整个表单。

validity 属性会告诉我们字段为什么有效或无效。这个属性是一个对象，包含一系列返回布尔值的属性。

customError：如果设置了 setCustomValidity()就返回 true，否则返回 false。
patternMismatch：如果字段值不匹配指定的 pattern 属性则返回 true。
rangeOverflow：如果字段值大于 max 的值则返回 true。
rangeUnderflow：如果字段值小于 min 的值则返回 true。
stepMisMatch：如果字段值与 min、 max 和 step 的值不相符则返回 true。
tooLong：如果字段值的长度超过了 maxlength 属性指定的值则返回 true。
typeMismatch：如果字段值不是"email"或"url"要求的格式则返回 true。
valid：如果其他所有属性的值都为 false 则返回 true。与 checkValidity()的条件一致。
valueMissing：如果字段是必填的但没有值则返回 true。

if (input.validity && !input.validity.valid){
    if (input.validity.valueMissing){
        console.log("Please specify a value.")
    } else if (input.validity.typeMismatch){
        console.log("Please enter an email address.");
    } else {
        console.log("Value is invalid.");
    }
}

6. 禁用验证

通过指定 novalidate 属性可以禁止对表单进行任何验证：

<form method="post" action="/signup" novalidate>

</form>

如果一个表单中有多个提交按钮，那么可以给特定的提交按钮添加 formnovalidate 属性，指定通过该按钮无须验证即可提交表单

选择框编程

使用select 和option 元素创建。属性和方法：

add(newOption, relOption)：在relOption 之前向控件中添加新的option
multipel：布尔值，表示是否允许多选
options：控件中所有option 元素的HTMLCollection
remove(index)：移除给定位置的选项
selectedIndex：选中项基于0的索引值，如果没有选中项则为-1。对于允许多选的，始终为第一个选项索引
size：选择框中可见的行数

option 元素属性：

index：索引
label：选项标签
selected：布尔值，是否选中
text：选项的文本
value：选项的值

选项处理

selectedIndex 属性获得选中选项。如果是多选，只返回第一个索引

添加选项

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

// Option 构造函数 、 add() 方法
let newOption2 = new Option("Option text", "option value");
selectbox.add(newOption2, undefined);

移除选项

// 1
selectbox.removeChild(selectbox.options[0]);

// 2
selectbox.remove(0);

移除和重排选项

通过DOM 方法可以直接将某个选项从第一个选项框移动到第二个选项框。使用appendChild(),如果是以后的元素，则该元素会先从其父元素中移除，然后再插入指定位置。

如果要移动到特定位置，可以使用inertBefore()

富文本编辑

在空白HTML中嵌入iframe，设置属性designMode

<iframe name="richedit" style="width:100px;height:100px;"></iframe>

window.addEventListener("load", ()=>{
  frames["richedit"].document.designMode = "on"
})