基于JavaScript表单脚本(详解)

什么是表单?

一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和javascript都有了长足的发展,web表单依然没有为许多常见的任务提供现成的解决方案,很多开发人员不仅会在验证表单的时候使用javascript,而且还会用来增强一些标准表单控件的默认行为。

一 ,表单的基础知识

在HTML中,表单由form标签,在javascript中,表单对应HTMLFormElement类型,HTMLFormElement类型继承HTMLElement类型,所有它和其他的Element元素有相同的默认属性,同时它也有自己的属性和方法:

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 特性。

要取得form表单元素的方法有: var form=document.getElementById('form1'); //通过id来取得表单元素

var firstForm=document.forms[0]; //通过document.forms来取得页面中的所有表单元素,通过索引值'0‘,取得第一个表单元素

var form2=document.forms['form2']; //通过document.forms来取得页面中的所有表单元素,通过name值取得特定的表单元素

提交表单:

 <!-- 通用提交按钮 -->
 <input type="submit" value="Submit Form">
 <!-- 自定义提交按钮 -->
 <button type="submit">Submit Form</button>
 <!-- 图像按钮 -->
 <input type="image" src="graphic.gif">

以这种方式提交表单时,浏览器会在将请求发送给服务器之前触发 submit 事件。这样,我们就有机会验证表单数据,并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交

在JS中我们同样可以以编程的方式调用submit()方法来提交表单:

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

阻止表单提交(阻止默认事件):

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});

在表单数据无效而不能发送给服务器时,可以使用这一技术

重置表单:

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>

在重置表单时,所有表单字段都会恢复到页面刚加载完毕时的初始值

用JS方法来重置表单:

var form = document.getElementById("myForm");
//重置表单
form.reset();

阻止重置表单的默认操作:

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});

表单字段:

每个表单都有Element属性,该属性是表单中所有表单元素(字段)的集合。这个集合是一个有序列表,每个表单字段在element集合中出现的顺序,与在标记中出现的先后顺序相同,可以按位置和name值来访问他们。常见的表单字段有input,select,fieldset,要取得表单中的表单字段:

var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

共有的表单字段属性:

disabled:布尔值,表示当前字段是否被禁用。

form:指向当前字段所属表单的指针;只读。

name:当前字段的名称。

readOnly:布尔值,表示当前字段是否只读。

tabIndex:表示当前字段的切换(tab)序号。

type:当前字段的类型,如"checkbox"、 "radio",等等。

value:当前字段将被提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径

除了 form 属性之外,可以通过 JavaScript 动态修改其他任何属性。

能够动态修改表单字段属性,意味着我们可以在任何时候,以任何方式来动态操作表单。

用户可能会重复单击表单的提交按钮。在涉及信用卡消费时,这就是个问题:因为会导致费用翻番。

为此,最常见的解决方案,就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件,并在该事件发生时禁用提交按钮即可 :

//避免多次提交表单
 EventUtil.addHandler(form, "submit", function(event){
 event = EventUtil.getEvent(event);
 var target = EventUtil.getTarget(event);
//取得提交按钮
 var btn = target.elements["submit-btn"];
//禁用它
 btn.disabled = true;
 });

除了<fieldset>之外,所有表单字段都有 type 属性。对于<input>元素,这个值等于 HTML 特性 type 的值。对于其他元素,这个 type 属性的值如下表所列。

共有的表单字段方法 :

每个表单字段都有两个方法: focus()和 blur()。使用 focus()方法,可以将用户的注意力吸引到页面中的某个部位。例如,在页面加载完毕后,将焦点转移到表单中的第一个字段。

EventUtil.addHandler(window, "load", function(event){ /*给window绑定一个监听事件,放页面加载完成,光标自动对准在指定的表单字段*/
document.forms[0].elements[0].focus();
});

HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中,只要设置这个属性,不用 JavaScript 就能自动把焦点移动到相应字段。

例如:

<input type="text" autofocus>

与 focus()方法相对的是 blur()方法,它的作用是从元素中移走焦点:

document.forms[0].elements[0].blur();

change事件:对于<input>和<textarea>元素,在它们失去焦点且 value 值改变时触发;对于

<select>元素,在其选项改变时触发。

二,文本框脚本

在 HTML 中,有两种方式来表现文本框:一种是使用<input>元素的单行文本框,另一种是使用<textarea>的多行文本框。

选择文本:

在文本框获得焦点时选择其所有文本,这是一种非常常见的做法 ,实现代码如下:

EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});

取得选择的文本 :

虽然通过 select 事件我们可以知道用户什么时候选择了文本,但仍然不知道用户选择了什么文本。HTML5 通过一些扩展方案解决了这个问题,以便更顺利地取得选择的文本。该规范采取的办法是添加两个属性: selectionStart 和 selectionEnd。

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

IE9+、 Firefox、 Safari、 Chrome 和 Opera 都支持这两个属性。 IE8 及之前版本不支持这两个属性,而是提供了另一种方案。 IE8 及更早的版本中有一个 document.selection 对象,其中保存着用户在整个文档范围内选择的文本信息

function getSelectedText(textbox){
if (typeof textbox.selectionStart == "number"){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
} else if (document.selection){
return document.selection.createRange().text;
}
}

过滤输入:

我们经常会要求用户在文本框中输入特定的数据,或者输入特定格式的数据。

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);//取得输入键的字符编码
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode))){ //将字符编码转换到字符,并用正则表达式检测是否符合匹配

EventUtil.preventDefault(event);

}
});

以上代码实现对表单字段中输入的数据的控制,只允许输入数字

有时我们想要屏蔽哪些非数字的键,而不像屏蔽哪些基本键和按下ctrl键的操作。

自动切换焦点:

使用 JavaScript 可以从多个方面增强表单字段的易用性。其中,最常见的一种方式就是在用户填写完当前字段时,自动将焦点切换到下一个字段。为增强易用性,同时加快数据输入,可以在前一个文本框中的字符达到最大数量后,自动将焦点切换到下一个文本框。

比如对于下面的表单字段而言:

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

<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">

想要达到自动切换焦点的效果,可以这样做:

(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event); //取得事件源
if (target.value.length == target.maxLength){ //检测输入的字符是否达到最大的字符要求
 var form = target.form;//取得该字段所在的表单
for (var i=0, len=form.elements.length; i < len; i++) { //遍历表单的字段
if (form.elements[i] == target) {//当遍历到当前所在的目标字段时,将焦点对准下一个表单字段
if (form.elements[i+1]){
form.elements[i+1].focus();
}
return;
}
}
}
}
var textbox1 = document.getElementById("txtTel1"); //取得目标
var textbox2 = document.getElementById("txtTel2"); 
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward); //绑定事件
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

HTML5约束验证API

为了在将表单提交到服务器之前验证数据,HTML5 新增了一些功能。

必填字段:required,例子比如:<input type="text" name="username" required>

type属性:"email"类型要求输入的文本必须符合电子邮件地址的模式,而"url"类型要求输入的文本必须符合 URL 的模式。

pattern属性:这个属性的值是一个正则表达式,用于匹配文本框中的值。例子如:<input type="text" pattern="\d+" name="count">

禁用验证:通过设置 novalidate 属性,可以告诉表单不进行验证。 例子如:

<form method="post" action="signup.php" novalidate>
<!--这里插入表单元素-->
</form>

三,选择框脚本

选择框是通过<select>和<option>元素创建的。 该类型还提供下列属性和方法:

add(newOption, relOption):向控件中插入新<option>元素,其位置在相关项(relOption)之前。

multiple:布尔值,表示是否允许多项选择;等价于 HTML 中的 multiple 特性。

options:控件中所有<option>元素的 HTMLCollection。

remove(index):移除给定位置的选项。

selectedIndex:基于 0 的选中项的索引,如果没有选中项,则值为-1。对于支持多选的控件,只保存选中项中第一项的索引。

size:选择框中可见的行数;等价于 HTML 中的 size 特性。

选择框的 type 属性不是"select-one",就是"select-multiple",这取决于 HTML 代码中有没有 multiple 特性。选择框的 value 属性由当前选中项决定,相应规则如下。

如果没有选中的项,则选择框的 value 属性保存空字符串。

如果有一个选中项,而且该项的 value 特性已经在 HTML 中指定,则选择框的 value 属性等于选中项的 value 特性。即使 value 特性的值是空字符串,也同样遵循此条规则。

如果有一个选中项,但该项的 value 特性在 HTML 中未指定,则选择框的 value 属性等于该项的文本。

如果有多个选中项,则选择框的 value 属性将依据前两条规则取得第一个选中项的值。

选择选项:

对于只允许选择一项的选择框,访问选中项的最简单方式,就是使用选择框的 selectedIndex 属性。例子如:

var selectedOption = selectbox.options[selectbox.selectedIndex];

添加选项:

可以使用 JavaScript 动态创建选项,并将它们添加到选择框中。

第一种方式就是使用如下所示的 DOM 方法:

var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

第二种方式是使用 Option 构造函数来创建新选项 :

var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption);

第三种添加新选项的方式是使用选择框的 add()方法,DOM 规定这个方法接受两个参数,要添加的新选项和将位于新选项之后的选项 :

var newOption = new Option("Option text", "Option value"); //
selectbox.add(newOption, undefined); //最佳方案 ,将新选项添加到列表最后

移除选项:

DOM 的 removeChild()方法,为其传入要移除的选项,如下面的例子所示:

selectbox.removeChild(selectbox.options[0]); //移除第一个选项

其次,可以使用选择框的 remove()方法 :

selectbox.remove(0); //移除第一个选项

最后一种方式,就是将相应选项设置为 null:

selectbox.options[0] = null; //移除第一个选项

要清除选择框中所有的项,需要迭代所有选项并逐个移除它们 :

function clearSelectbox(selectbox){
for(var i=0, len=selectbox.options.length; i < len; i++){
selectbox.remove(0);
 }
}

这个函数每次只移除选择框中的第一个选项。由于移除第一个选项后,所有后续选项都会自动向上移动一个位置,因此重复移除第一个选项就可以移除所有选项了。

移动和重排选项:

如果为 appendChild()方法传入一个文档中已有的元素,那么就会先从该元素的父节点中移除它,再把它添加到指定的位置 :

var selectbox1 = document.getElementById("selLocations1"); //每个子节点只有一个父节点,所以会先删除以前位置的节点
var selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);

重排选项次序的过程也十分类似,最好的方式仍然是使用 DOM 方法。要将选择框中的某一项移动到特定位置,最合适的 DOM 方法就是 insertBefore();

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]); //要在选择框中向前移动一个选项的位置

表单序列化:

表单序列化简单说就是将,各表单字段按名值对的形式进行url编码。

表单序列化有以下规则:

 对表单字段的名称和值进行 URL 编码,使用和号(&)分隔。

 不发送禁用的表单字段。

 只发送勾选的复选框和单选按钮。

 不发送 type 为"reset"和"button"的按钮。

 多选选择框中的每个选中的值单独一个条目。

 在单击提交按钮提交表单的情况下,也会发送提交按钮;否则,不发送提交按钮。也包括 type为"image"的<input>元素。

<select>元素的值,就是选中的<option>元素的 value 特性的值。如果<option>元素没有value 特性,则是<option>元素的文本值。

四,富文本编辑

这一技术的本质,就是在页面中嵌入一个包含空 HTML 页面的 iframe。通过设置 designMode 属性,这个空白的 HTML 页可以被编辑,而编辑对象则是该页面<body>元素的 HTML 代码。 designMode 属性有两个可能的值: "off"(默认值)和"on"。在设置为"on"时,整个文档都会变得可以编辑(显示插入符号),然后就可以像使用字处理软件一样,通过键盘将文本内容加粗、变成斜体,等等。另一种编辑富文本内容的方式是使用名为 contenteditable 的特殊属性,这个属性也是由 IE 最早实现的。可以把 contenteditable 属性应用给页面中的任何元素,然后用户立即就可以编辑该元素。

以上这篇基于JavaScript表单脚本(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript 表单处理实现代码

    一 表单介绍 在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型; // HTMLFormElement继承了HTMLElement;因此它拥有HTML元素具有的默认属性,别且还独有自己的属性和方法; HTMLFormElement属性和方法 属性或方法 说明 acceptCharset 服务器能够处理的字符集; action 接受请求的URL; elements 表单中所有控件的集合; enctype 请求的编码类型;

  • 超实用的JavaScript表单代码段

    整理了下比较实用的Javascript表单代码段,分享给大家供大家参考,具体内容如下 1 多个window.onload方法 由于onload方法时在页面加载完成后,自动调用的.因此被广泛的使用,但是弊端是只能实用onload执行一个方法.下面代码段,可以保证多个方法在Onload时执行: function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ wind

  • 基于JavaScript表单脚本(详解)

    什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav

  • JS中artdialog弹出框控件之提交表单思路详解

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口. 前言: 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 完善的接口 它的接口完善,可以轻易与外部程序配合使用.如异步写入消息.控制位置.尺寸.显示与隐藏.关闭等. 细致的体验 如果不是在输入状态,它支持Esc快捷键关

  • jQuery validate+artdialog+jquery form实现弹出表单思路详解

    功能描述: 在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证. 适用范围: 适用于在列表页面新增,修改记录. 需要加载的js文件: jquery.min.js artDialog.js iframeTools.js jquery.form.js jquery.validate.js 实现思路: 在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写

  • python框架flask表单实现详解

    这篇文章主要介绍了python框架flask表单实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 表单 表单用于注册,修改用户数据等场景. flask-wtf提供了一个包,可以创建表单:pip install flask-wtf 为了防止跨域请求,flask_wtf自己生成一个秘钥,用秘钥生成加密口令,然后用口令验证表单中的数据真伪(是否被篡改过) from flask import Flask from flask import req

  • jquery插件bootstrapValidator表单验证详解

    Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站. 看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用. 准备工作 BootstrapValidator文档地址:http://bv.doc.javake.cn/ 下载源码后,将其中的bootstrapValidator.min.css和bootstapVali

  • BootStrap智能表单实战系列(三)分块表单配置详解

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst

  • Vue.js实现可配置的登录表单代码详解

    表单是后台项目业务中的常用组件,这次重构了登录功能以满足登录方式可配置的需求,在此记录和分享一下. 业务场景 在之前,项目只支持手机号+密码登录,前端是直接把表单写死的,后来有客户希望能支持验证码登录,有的客户还希望能有手机号+验证码+密码的登录方式-所以登录方式的灵活性需要可配置的表单支持,于是我把登录组件做了拆分. 以表单元素为粒度,分离出了手机号.密码.短信验证码这几个组件,它们内部都有自己的表单验证方法,通过组合可以快速完成登录.注册.找回密码等表单组件.高内聚低耦合.高内聚低耦合-跟着

  • Symfony2框架学习笔记之表单用法详解

    本文实例讲述了Symfony2框架表单用法.分享给大家供大家参考,具体如下: 对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将 从基础开始创建一个复杂的表单,学习表单类库中最重要的内容. Symfony2 的Form组件是一个独立的类库,你可以在Symfony2项目之外使用它. 创建一个简单的表单: 假设你要创建一个应用程序的todo列表,需要显示一些任务.因为你的用户需要编辑和创建任务,所

  • 在Django同1个页面中的多表单处理详解

    快速上手Django实现项目 近期公司在做1个海淘的项目,APP为pylot.由于时间比较赶,加上隔壁那哥们不在,只能自己挑大梁了.结果,当项目做出来之后,被领导狠狠的批了一顿,说怎么用django写,你能解决Django的内存问题吗,你能解决并发的问题吗?Django那么重. 然后我只好回答说,正是因为它重,所以人家拿来写大型项目.虽然这里不是为了上面这2个问题的,而是来说下如何快速开发原型的问题. 对于Django这样基于模型的Web框架,实话说真的解决了很多繁琐的工作.由于它1个模型对应1

  • Spring MVC---数据绑定和表单标签详解

    数据绑定和表单标签 数据绑定 数据绑定是将用户输入绑定到领域模型的一种特性,在Spring MVC的controller和view数据传递中,基于HTTP请求的特性,所有HTTP请求参数的类型均为字符串,如果模型领域需要绑定的类型为double或int,则需要手动进行类型转换,而有了数据绑定后,就不需要手动将HTTP请求中的String类型转换为模型需要的类型了,数据绑定的另一个好处是,当输入验证失败时,会重新生成一个HTML表单,无需重新填写输入字段. 表单标签库 表单标签库中包含了可以用在J

随机推荐