• JavaScript学习14:表单处理


            什么是表单?

            在HTML中,表单是由<form>元素来表示的。而在JavaScript中,表单相应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement,因此它拥有HTML元素的默认属性,而且还独有自己的属性和方法。

            

            获取表单<form>对象的方法有非常多种,比方:document.getElementById(“表单标签ID”)、document.getElementsByTagName(‘标签名称’)等等。

            提交表单

            获取了页面表单对象。就要考虑怎样将表单数据提交给后台了。通常的方式是使用submit事件,他的默认行为就是携带数据跳转到指定的页面。

    我们能够通过事件对象。来阻止submit的默认行为。

    同一时候也能够使用submit()方法来自己定义触发submit事件,也就是说并不一定要点击submitbutton才干进行提交操作。

            提交数据最大的问题就是反复提交表单。由于各种原因,当一条数据提交到server的时候会出现延迟等长时间没有响应的情况。导致用户不停的进行提交操作,从而使得反复提交了非常多同样的请求,或者造成错误,或者这写入多条同样的信息,而这都不是我们想看到的。

            解决的方法,简单来说有两个:第一就是提交之后,立马禁用点击button;另外一种就是提交之后,进行推断,若已提交过,则取消兴许的表单提交提交操作。

            了解了上面的基础知识。我们来看两种经常使用的表单元素:文本框和选择框。

            文本框脚本

            在HTML中,有两种方式来表现文本框:一种是单行文本框<input type=”text”>,一种是多行文本框<textarea>。尽管<input>在字面上有value值,<textarea>没有,可是我们都能够通过value获取他们的值。至于其它的属性和方法不再赘述,以下看一个比較有意思的东西,过滤输入。

            为了使文本框输入指定的字符。我们必需要对输入的字符进行验证。

    有一种做法是推断字符是否合法,这是提交后操作的。

    那么我们也能够在提交前限制某些字符,这就是过滤输入。看下代的简单实现:     

    <span style="font-size:18px;">//屏蔽非数字键的输入
    	addEvent(textField,'keypress',function(evt){
    		var e=evt||window.event;
    		var charCode=getCharCode(evt);
    		if(!/d/.test(String.fromCharCode(charCode))&&charCode>8){
    			preDet(evt);
    		}
    	});</span>

            选择框脚本

            选择框是通过<select>和<option>元素创建的,除了通用的一些属性和方法外,HTMLSelectElement类型还提供了例如以下的属性和方法:

           

            在DOM中。每一个<option>元素都有一个HTMLOptionElement对象,以便訪问数据。这个对象有例如以下一些属性:

            

            选择框有单选和多选之分。对于单选来说,使用selectedIndex属性最为简单。

    而对于多选的需求,则使用selected属性更为简单一些。这是推断是否选中,对于选中的button怎样获取它的值,就要使用checked属性了。

            代码演示样例就不再写了。由于比較简单,都是基础性的。大家有兴趣实践的能够写写代码实现一下单选和多选的功能。

            小结一下:

            JS的表单处理远远不止这些,比方表单里面的表格、页面的label等等。都是表单的元素,尤其是datagrid控件。它和后台的数据交互比較重要。我们在做各种管理信息系统的过程中,肯定要大量的使用它,因此还有非常多的东西须要我们去了解和深入学习。

  • 相关阅读:
    webpack--前端自动化工具
    Vue--入门篇
    集千篇理论,终得深拷贝与浅拷贝的初解
    事件循环--eventloop
    对象的属性(变量+对象)
    集千篇理论精华,感悟对同步和异步的理解
    vue--先决篇
    js的基本语法规范
    python 模块加载错误总结
    Python logging模块无法正常输出日志
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/7190197.html
Copyright © 2020-2023  润新知