JavaScript基础知识总结 17:JavaScript表单脚本
一、表单基础
Web表单在HTML中以元素表示,在JavaScript中则以HTMLFormElement类型表示。
HTMLFormElement类型继承自HTMLElement类型,因此拥有与其它HTML元素一样的默认属性,不过,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属性;
二、提交表单
//通用提交表单
<input type="submit" value="Submit Form">
//自定义按钮提交表单
<button type="submit">Submit Form</button>
- 1
- 2
- 3
- 4
如果表单中有上述任何一个按钮,且焦点在表单中某个控件上,则按回车键就可以提交表单。阻止这个事件的默认行为可以取消提交表单。
let form = document.getElementById("myForm");
form.addEventListener("submit",(event) => {
//阻止表单提交
event.preventDefault();
});
- 1
- 2
- 3
- 4
- 5
调用preventDefault()就可以阻止表单提交。
也可以通过submit()方法提交表单。
let form = document.getElementById("myForm");
form.submit();
- 1
- 2
事件提交的最大问题是如何避免二次提交。
如果提交表单之后没有什么反应,用户可能会进行第二次点击,甚至更多次,结果肯定是很烦人的,比如服务器要处理重复的请求,甚至可能造成损失(比如用户在购物,则可能会下多个单,引起不必要的客户投诉。)。解决这个问题的方式,① 在表单提交后禁用提交按钮。② 通过onsubmit()事件处理程序取消之后的表单提交。
三、表单字段的公共属性、方法、事件
1、表单字段的公共属性
- disabled:布尔值,表示表单字段是否禁用;
- form:指针,指向表单字段所属的表单,这个属性是只读的;
- name:字符串,这个字段的名字;
- readOnly:只读
- tabIndex:数值,表示这个字段在按Tab键时的切换顺序;
- type:字符串,表示字段类型,比如checkbox、radio等;
- value:要提交给服务器的字段值
例如:
let form = document.getElementById("myForm");
let field = form.elements[0];
field.value = "zhangsan";
//给字段设置焦点
field.focus();
//禁用字段
field.disabled = true;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
避免多出提交的代码:
let form = document.getElementById("myForm");
for.addEventListener("submit",(event) => {
let target = event.target;
let btn = target.elements["submit"];
btn.disabled = true;
});
- 1
- 2
- 3
- 4
- 5
- 6
以上代码在表单的submit事件上注册了一个事件处理程序,当submit事件触发时,代码会取得提交按钮,然后将其disabled属性设置为true。注意,这个功能不能通过直接给提交按钮添加onclick事件处理程序来实现,原因是不同浏览器触发事件的时机不一样。有些浏览器会在触发表单的submit事件前先触发提交按钮的click事件,有些浏览器则会后触发click事件,对于先触发click事件的浏览器,这个按钮会在表单提交前被禁用,这就意味着表单不会被提交了。因此最好使用表单的submit事件来禁用提交按钮。
2、表单字段的公共方法
每个表单字段都有两个公共方法:focus()
和blur()
。
focus()
方法把浏览器焦点设置到表单字段,这意味着该字段会变成活动字段并可以响应键盘事件。
blur()
是focus()
的反向操作,从元素上移除焦点。
3、表单字段的公共事件
- blur:在字段失去焦点时触发;
- change:在
<input>
和<textarea>
元素的value发生变化且失去焦点时触发,或者在<select>
元素中选中项发生变化时触发; - focus:在字段获得焦点时触发;
四、输入过滤,屏蔽字符
下面代码屏蔽所有按键的输入:
textbox.addEventListener("keypress",(event) => {
event.preventDefault();
});
- 1
- 2
- 3
运行以上代码会让文本框编程只读,因为所有按键都被屏蔽了。如果想只屏蔽部分特定字符,则需要检查事件的charCode属性,以确定正确的回应方式。
例如,下面就是只允许输入数字的代码:
textbox.addEventListener("keypress",(event) => {
if(!/\d/.test(String.fromCharCode(event.charCode))){
event.preventDefault();
}
});
- 1
- 2
- 3
- 4
- 5
上述代码先用String.fromCharCode()把事件的charCode转换为字符串,再用正则表达式/\d/
来测试。
这个正则表达式匹配所有数字字符。
五、剪切板事件
- beforecopy
- copy
- beforecut
- cut
- beforepaste
- 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{
//字段无效
}
- 1
- 2
- 3
- 4
- 5
checkValidity()方法只会告诉我们字段是否有效,而validity属性会告诉我们字段为什么有效或者无效。这个属性是一个对象,包含一系列返回布尔值的属性。
6、禁用验证
通过特定noValidate属性可以禁止对表单进行任何验证。
document.form[0].noValidate = true;//关闭验证
八、选择框编程
选择框是使用<select>
和<option>
创建的。
常见属性和方法:
- add:在relOption之前向控件中添加新的;
- multiple:布尔值,表示十分允许多选;
- options:控件中所有元素;
- remove(index):移除给定位置的选项;
- selectedIndex:选中项基于0的索引值,没有没有选中项则为-1,对于允许多选的列表,始终是第一个选项的索引;
- size:选择框中可见的行数;
文章来源: blog.csdn.net,作者:哪 吒,版权归原作者所有,如需转载,请联系作者。
原文链接:blog.csdn.net/guorui_java/article/details/123614407
- 点赞
- 收藏
- 关注作者
评论(0)