JavaScript基础知识总结 17:JavaScript表单脚本

Posted 哪 吒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript基础知识总结 17:JavaScript表单脚本相关的知识,希望对你有一定的参考价值。

目录

一、表单基础

Web表单在html中以元素表示,在javascript中则以HTMLFormElement类型表示。
HTMLFormElement类型继承自HTMLElement类型,因此拥有与其它HTML元素一样的默认属性,不过,HTMLFormElement也有自己的属性和方法。

  1. acceptCharset:服务器可以接收的字符集,等价于HTML中的accept-charset属性;
  2. action:请求中的URL,等价于HTML中的action属性;
  3. elements:表单中所有控件的HTMLCollection;
  4. enctype:请求的编码类型,等价于HTML中的enctype属性;
  5. length:表单中控件的数量;
  6. method:HTTP请求的方法类型,通常是get或post,等价于HTML中的method方法;
  7. name:表单的名字,等价于HTML中的name属性;
  8. reset():把表单字段重置为各自的默认值,一般情况下不建议使用;
  9. submit():提交表单;
  10. target:用于发送请求和接收相应地窗口的名字,等价于HTML中的target属性;

二、提交表单

//通用提交表单
<input type="submit" value="Submit Form">
//自定义按钮提交表单
<button type="submit">Submit Form</button>

如果表单中有上述任何一个按钮,且焦点在表单中某个控件上,则按回车键就可以提交表单。阻止这个事件的默认行为可以取消提交表单。

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

调用preventDefault()就可以阻止表单提交。
也可以通过submit()方法提交表单。

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

事件提交的最大问题是如何避免二次提交。
如果提交表单之后没有什么反应,用户可能会进行第二次点击,甚至更多次,结果肯定是很烦人的,比如服务器要处理重复的请求,甚至可能造成损失(比如用户在购物,则可能会下多个单,引起不必要的客户投诉。)。解决这个问题的方式,① 在表单提交后禁用提交按钮。② 通过onsubmit()事件处理程序取消之后的表单提交。

三、表单字段的公共属性、方法、事件

1、表单字段的公共属性

  1. disabled:布尔值,表示表单字段是否禁用;
  2. form:指针,指向表单字段所属的表单,这个属性是只读的;
  3. name:字符串,这个字段的名字;
  4. readOnly:只读
  5. tabIndex:数值,表示这个字段在按Tab键时的切换顺序;
  6. type:字符串,表示字段类型,比如checkbox、radio等;
  7. value:要提交给服务器的字段值
    例如:
let form = document.getElementById("myForm");
let field = form.elements[0];
field.value = "zhangsan";
//给字段设置焦点
field.focus();

//禁用字段
field.disabled = true;

避免多出提交的代码:

let form = document.getElementById("myForm");
for.addEventListener("submit",(event) => 
	let target = event.target;
	let btn = target.elements["submit"];
	btn.disabled = true;
);

以上代码在表单的submit事件上注册了一个事件处理程序,当submit事件触发时,代码会取得提交按钮,然后将其disabled属性设置为true。注意,这个功能不能通过直接给提交按钮添加onclick事件处理程序来实现,原因是不同浏览器触发事件的时机不一样。有些浏览器会在触发表单的submit事件前先触发提交按钮的click事件,有些浏览器则会后触发click事件,对于先触发click事件的浏览器,这个按钮会在表单提交前被禁用,这就意味着表单不会被提交了。因此最好使用表单的submit事件来禁用提交按钮。

2、表单字段的公共方法

每个表单字段都有两个公共方法:focus()blur()
focus()方法把浏览器焦点设置到表单字段,这意味着该字段会变成活动字段并可以响应键盘事件。
blur()focus()的反向操作,从元素上移除焦点。

3、表单字段的公共事件

  1. blur:在字段失去焦点时触发;
  2. change:在<input><textarea>元素的value发生变化且失去焦点时触发,或者在<select>元素中选中项发生变化时触发;
  3. focus:在字段获得焦点时触发;

四、输入过滤,屏蔽字符

下面代码屏蔽所有按键的输入:

textbox.addEventListener("keypress",(event) => 
	event.preventDefault();
);

运行以上代码会让文本框编程只读,因为所有按键都被屏蔽了。如果想只屏蔽部分特定字符,则需要检查事件的charCode属性,以确定正确的回应方式。
例如,下面就是只允许输入数字的代码:

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

上述代码先用String.fromCharCode()把事件的charCode转换为字符串,再用正则表达式/\\d/来测试。
这个正则表达式匹配所有数字字符。

五、剪切板事件

  1. beforecopy
  2. copy
  3. beforecut
  4. cut
  5. beforepaste
  6. paste

六、自动切换

JavaScript可以通过很多方式增强表单字段的易用性,最常见的是在当前字段完成时自动切换到下一个字段,比如对于已知长度的输入框,比如手机号码,在中国手机号码都是11位,可以在手机号码输入框到达11个字符时,自动把焦点移到下一个输入框。

七、HTML5约束验证API

1、必填字段required

2、更多输入类型

  • type="email";
  • type="url";

3、数值范围

除了email和url,HTML5还定义了其它几种新的输入元素类型,它们都是期待某种数据输入的,比如number、range、datetime、datetime-local、date、month、week、time

4、输入模式

HTML5为文本字段新增了pattern属性,这个属性用于指定一个正则表达式,用户输入的文本必须与之匹配。例如只能在文本中输入数字,
<input type="text" pattern="\\d+" name="count">

5、检测有效性

使用checkValidity()方法可以检测表单中任意给定字段是否有效。这个有效性检测是针对前面提到的约束API,如果字段有效就会返回true,否则返回false。

if(document.form[0].elements[0].checkValidity())
	//字段有效
else
	//字段无效

checkValidity()方法只会告诉我们字段是否有效,而validity属性会告诉我们字段为什么有效或者无效。这个属性是一个对象,包含一系列返回布尔值的属性。

6、禁用验证

通过特定noValidate属性可以禁止对表单进行任何验证。
document.form[0].noValidate = true;//关闭验证

八、选择框编程

选择框是使用<select><option>创建的。

常见属性和方法:

  1. add:在relOption之前向控件中添加新的;
  2. multiple:布尔值,表示十分允许多选;
  3. options:控件中所有元素;
  4. remove(index):移除给定位置的选项;
  5. selectedIndex:选中项基于0的索引值,没有没有选中项则为-1,对于允许多选的列表,始终是第一个选项的索引;
  6. size:选择框中可见的行数;

以上是关于JavaScript基础知识总结 17:JavaScript表单脚本的主要内容,如果未能解决你的问题,请参考以下文章

语法基础Javas cript变量的声明和使用

javas cript入门要了解的知识和书籍

JavaScript基础知识总结 17:JavaScript表单脚本

JavaScript 内存

JavaScript 基础一

JavaScript基础#1 -- 2019-08-17 00:11:51