JavaScript表单脚本

最新推荐文章于 2022-01-10 10:32:30 发布

贾明恣

最新推荐文章于 2022-01-10 10:32:30 发布

阅读量286

点赞数 1

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43342290/article/details/115048213

版权

JavaScript基础专栏收录该内容

36 篇文章 0 订阅

订阅专栏

注意关注HTML5在表单方面新增的许多属性和事件

表单

HTML5约束验证API
文本框编程
选择框编程
富文本编辑
- 添加
- 交互
文件选择器

JavaScript较早的用途之一：服务器端表单处理的责任，即表单验证
web表单在HTML以< form >元素存在，JavaScript中HTMLFormElement类型（继承自HTMLElement)

JavaScript

HTMLFormElement类

acceptCharset:服务器可以接收的字符集
action：请求的URL

<form action="/mail.php">处理表单的程序、脚本的位置
    php、asp、aspx、jsp、python、ruby等语言都可以
</form>

elements:表单中所有控件的HTMLCollection
enctype:请求的编码类型
length：表单中控件的数量
method：HTTP请求的方法
name:表单的名称
reset（）：把表单字段重置为各自的默认值
submit（）：提交表单
target：用于发送请求和接收响应的窗口的名字

HTML中基本都有对应元素属性

JS获取对< form >元素的引用的方法
赋予id后getElementById(“id”);
document.forms集合获取页面上所有表单的集合，然后还可以用数字索引或者name（同名则返回集合）来访问特定表单
document.form[“formname”];
document.form[“formname”].elements["控件名“]；//表单内部的控件也能通过这样的方式访问

<body>
    <form action=" ">
        <input type="file" id="file" /><br/>
        <input tpe="button" value="显示文件信息" onclick="show();"/><br/>
        文件字节长度:<span id="size"></span>

    </form>

    <script>
       function show(){
           var file=document.getElementById("file").files[0];
           alert("name:"+file.name);
           var size=document.getElementById("size");
           size.innerHTML=file.size;
           console.log(file.size);
       }
    </script>
</body>

表单字段

即表单内部的控件

除了< fieldset > 以外，所有表单字段的公共属性和方法，JavaScript可以动态修改其来增强标准表单控件的默认行为。
属性：

disabled：布尔值，是否禁用.(提交之后禁用提交按钮防止多次提交），禁用字段不会提交
form：指针，只读，指向表单
name
readOnly:该字段是都只读
type:
value:要交给服务器的字段值
tabIndex：按Tab键时的切换顺序？？？

方法：
focus()把浏览器焦点设置到表单字段，该字段会变成活动字段并可以响应键盘事件

注意：字段被CSS属性display或者visibility隐藏时容易出错，所以HTML5为表单字段增加了autofocus属性，支持的浏览器会自动为带有该属性的元素设置焦点。

<input type="text" autofocus>

blur()移除焦点
change() :
在input、textarea元素的value发生变化且失去焦点时、< select >元素中选中项变化时触发
不同元素触发契机不同

HTML

表单提交按钮

表单时通过用户点击提交按钮、或者图片按钮来提交
提交按钮：
type=“submit” 的input、button元素
type=“image” 的input元素

焦点+回车==点击

会在向服务器发送请求前触发submit事件，这样就提供了一个表单验证的机会，在submit事件上注册事件处理程序。
重置表单
type=“reset” 的input、button元素

表单设计中通常不提倡重置表单，没有这个需求，通常是让用户点击返回前一步

提交事件js

以上述方式提交表单时，浏览器会在请求发送给服务器之前，触发submit事件。
可以验证表单数据，并且决定是否允许表单提交。组织这个事件的默认行为就可以阻止表单的提交

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

又或者无需按钮触发，自动提交

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

HTML5约束验证API

必填字段,添加属性required

<input type="text" name="username" required>
 let isRequired=document.forms[0].elements["username"].required;//检测是否必须

更多输入类型,默认验证
range、search、tel、time、url、week

 <input type="email" name="email">
 <input type="url" name="homepage">

数值范围
输入模式
pattern属性添加匹配的正则表达式
检测有效性
checkValidity()和validity属性
禁用验证
给提交按钮的属性

文本框编程

单行使用input 默认type=“text”
size文本框宽度的字符数

<input  type="text"   size="25" maxlength="50" value="dddd">

多行使用textarea

<textarea rows="3" cols="20"> </textarea>

选择文本
两种文本框都支持select（）方法选中文本框中的文本

输入过滤
文本框默认没有过滤功能，要通过JavaScript来实现过滤

编码
~~enctype~~ 有三个属性值，规定在发送到服务器之前应该如何对表单数据进行编码。
改为formenctype属性
默认地，表单数据会编码为 “application/x-www-form-urlencoded”。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）。

formaction：重写表单action属性
formenctype：重写表单enctype属性
formmethod：重写表单method属性
formnovalidate：重写表单novalidate属性
formtarget：重写表单target属性

屏蔽字符

//keypress一般只有在键入字符键的时候才会触发
 textbox.addEventListener("keypress",(event)=>{
	if(!/\d/.test(String.fromCharCode(event.charCode))){
		event.preventDefault();//非数字输入
	}
	//正则表达式/\d/匹配所有的数字字符 /\d/.test
});

上述代码忽略了快捷键的使用，复制黏贴
增加条件

if(!/\d/.test(String.fromCharCode(event.charCode))&&!event.ctrlKey){
}

处理剪贴板

大多数浏览器支持剪贴板相关事件及通过JavaScript访问剪贴板数据的浏览器。

剪贴板事件
beforecopy：
copy:
beforecut:
cut:
beforepaste:
paste:

剪贴板数据可以通过window（IE）、event上的clipboardData（其他大多浏览器）

clipboardData.getData();
clipboardData.setData();
clipboardData.clearData();

自动切换

JavaScript可以通过很多方式来增强表单字段的易用性
最常见的是在当前字段完成时自动切换到下一个字段。对于要收集已知长度的字段。
可以在每个文本框输入到最大自动把焦点切换到下一个文本框。

选择框编程

元素 < select >和< option >

<select id="mySelect">
	<option value="a">Apple</option>
	<option value="o">Orange</option>
	<option value="p">Pineapple</option>
	<option>Banana</option>
</select>

option属性:

index:选项在options中的索引
label：
selected:
text:
value:选项的值，无则空字符串

选项处理
单项选择的时候select有selectedIndex
多项选择，遍历selected属性

可以用JavaScript实现动态添加新的选择,删除旧的选择框

select.appendChild(new Option("text","value"));
select.removeChild(0);//索引值

表单序列化
表单可以使用表单字段的type、name、value属性进行序列化
serialize();//返回查询字符串格式，返回其他格式可以适当修改

富文本编辑

添加

designMode 属性
off(默认）
on：嵌入一个iframe，可以编辑

添加一个contenteditable属性
true
false
inherit

交互

JavaScript通过execCommand()传入一些浏览器支持的既定命令，与其交互
通过元素框innerHTML属性来获取富文本实现表单提交富文本。

文件选择器

Web表单不仅能收集数据，还能用于传送来自用户硬盘的外部文档

<input type=file>

控件跟操作系统有关

贾明恣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript表单脚本

表单基础HTMLFormElement类表单提交按钮重置表单表单字段文本框编程JavaScript较早的用途之一：服务器端表单处理的责任，即表单验证基础web表单在HTML以< form >元素存在，JavaScript中HTMLFormElement类型（继承自HTMLElement)HTMLFormElement类acceptCharset:服务器可以接收的字符集action：请求的URLelements:表单中所有控件的HTMLCollectionenctype:请求的编
复制链接

扫一扫

专栏目录