JavaScript中的表单编程
Posted zai1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript中的表单编程相关的知识，希望对你有一定的参考价值。
表单编程
1获取表单相关信息
1.什么是表单元素
1.什么是表单元素
在H TML中表单就是指form标签，它的作用是将用户输入或选择的数据提交给指定的服务器
2.如何获取表单元素
<form id="form1" name="form1">
</form>
<script>
//方法一：
let fm = document.getElementbyId("fm");
//方法二：
let fm = document.forms[0];
//方法三：
let fm = document.fo rms["fo rml"];// 其中的 forml 可以是 id 或 name 的值
//方法四：
let fm = document.fo rml;// 其中的 forml 只能是 name 的值
</script>
3什么是表单字段(域)
首先表单字段应该包含在form元素中，但并不意味着f orm中的所有元素都是表单字段。实际上表 单字段主要是指六个元素：
•input -类型众多，主要是定义输入域
•textarea -多行文本
•select -定义下拉或多选列表
•fieldset -将相关的表单用外框包含起来
•button -默认带提交功能的按钮
•output -显加输出结果
还有些元素虽然不属于表单字段，但是也具备一些和表单字段交互的功能：
•label -为input元素定义标注
•datalist -为input元素提供选项列表
input 的 type 类型
input元素比较特殊，它有个属性type，可以将input呈现出不同的效果。如:
•text -文本框
•password -密码框
•radio -单选框
•checkbox -多选框
•file -文件上传控件
•hidden -隐藏表单
•submit -提交按钮
•image -带图片的提交按钮
•reset -重置按钮
•button -普通按钮
|注意：submit、image和button标签都具备提交功能。
html5新增的type类型：
•email
•url
•number
•range
•date
•time
•datetime-local
•month
•week
•search
•tel
•color
2获取表单字段
<form id="form1" name="form1">
<input type="text" id="phone" name="phone" /> </form>
<script>
//获取表单元素：
let fm = document.getElementbyId("fm");
//方法一：
let field = document.getElementById("phone");
//方法二：
let field = fm.elements[0];// elements是获取表单元素中所有表单域对象，通过下标值访问
某一个表单字段
//方法三：
let field = fm.elements["phone"];// 其中的phone可以是id或name的值
//方法四：
let field = fm.phone;// 其中的 phone 可以是 id 或 name 的值
//方法五：
let field = fm["phone"];// 其中的 phone 可以是 id 或 name 的值
//方法六：
let field = fm[0];//其中的下标值表示表单字段在表单元素中的序号
</script>
3获取表单字段的值
可以通过value属性来获取表单字段的值
<body>
<form action="">
<input type="text" name="" id="test" value="this is a test">
<textarea name="" id="test2" cols="30" rows="10">this is a test,too< /textarea>
<script>
console.log(test.value); // this is a test console.log(test2.value); // this is a test,too //如果是文本域，还可以通过inne rH TML来获取值 console.log(test2.innerHTML); // this is a test,too </script>
</form>
</body>
2 表单属性介绍
1.form
•action -提交的地址
•autocomplete -是否启用表单的自动完成功能，默认为启用(on)
•enctype -数据传递的方式
•method -提交方法
•name -表单名
•target -规定在何处打开actio n指定的地址
2.input
•autocomplete -规定i nput元素输入字段是否应该启用自动完成功能。默认on
•autofocus -规定当页面加载时i nput元素应该自动获得焦点
•checked -规定type=checkbox/radio时是否为选中状态
•disabled -禁用该元素
•list -指向引用的datalist，值为datalist的id
•maxlength -规定i nput元素中允许的最大字符数
•name -表单字段的名称
•placeholder -规定可描述输入i nput字段预期值的简短的提示信息
•readonly -规定输入字段是只读的
•type -规定要显示的input元素的类型
•value -指定input元素value的值
3.textarea
•autofocus -规定当页面加载时i nput元素应该自动获得焦点
•disabled -禁用该元素
•maxlength -规定i nput元素中允许的最大字符数
•name -表单字段的名称
•placeholder -规定可描述输入i nput字段预期值的简短的提示信息
•readonly -规定输入字段是只读的
•rows -规定文本区域内可见的行数
•cols -规定文本区域内可见的列数
textarea是通过cols和rows属性来规定textarea的尺寸大小，不过更好的办法是使用CSS的 height 和 width 属性。
4.select
•autofocus -规定当页面加载时i nput元素应该自动获得焦点
•disabled -禁用该元素
•name -表单字段的名称
•multiple -当指定了该属性时下拉列表变多选列表
5.option
|注意：option只能包含在select或datalist中。
?disabled -规定此选项应在首次加载时被禁用
?selected -规定选项（在首次显示在列表中时）表现为选中状态
?value -定义送往服务器的选项值
6.button
•autofocus -规定当页面加载时自动获得焦点
•disabled -规定此选项应在首次加载时被禁用
•type -只有三个值,button表示普通按钮；submit表示提交按钮；reset表示重置按钮；
•value -按钮中的文本值，可以写在开始和结束标签之间
7.特殊属性
上面介绍的属性中有些是比较特殊的，它们特殊之处在于可以不需要属性值，只需要有属性名即 可生效。
当然也可以定义属性值
如果是通过JS来设 置这些属性，值就需要通过boolean类型来设定，true表示生效、false反之。
在表单元素中这类属性有：
•autofocus
•readonly
•disabled
•multiple
•checked
•selected
3 表单相关事件
1.提交事件
表单元素中有三种类型的标签具备提交功能：
<input type="submit" >
<input type="image" >
<button type="submit">提交</button>
当点击提交按钮后，会触发form元素上的o nsubmit事件，通过为它绑定事件处理方法，可以在提 交到服务器之前做一些操作：比如验证表单。
如果想要阻止表单提交，可以使用事件对象中的阻止事件默认行为的方法：preventDefault()
2.重置事件
重置是指将表单中的字段都还原到默认的状态值，而并不是清空内容。表单元素中有两种类型的 标签具备重置功能：
<input type="reset" >
<button type=" reset">重置 </button>
当点击重置按钮后，会触发form元素上的o nreset事件，通过为它绑定事件处理方法，可以在重 置之前做一些操作。
如果想要阻止表单重置，可以使用事件对象中的阻止事件默认行为的方法：preventDefault()
3.其他的提交和重置方法
除了可以使用标签提交表单外，form元素还提供了两个方法：submit()和reset()，它们也具备提交的功能。
4.焦点事件
焦点事件，顾名思义就是当表单里面的控件获取到焦点时所触发的事件。点到输入框，会触发焦 点事件，当鼠标离开某个控件时，同样可以触发焦点事件。在javascript中，对应的焦点事件有 如下两个：
• focus：获取焦点时触发的事件的名称
• blur :失去焦点时触发的事件的名称
5.改变事件
在实际开发中，表单元素中有两个控件也用的比较多，就是radio和checkbox控件，与这两个控 件经常绑定的有一个事件叫做change事件，这个事件会在表单的内容发生变化时被触发，同样适 用于text, select和textare等表单控件
6.input 事件
在文本框(text)中使用change事件，需要失去焦点，并改变了输入框中内容时才会触发。但有的 时候要求在输入框中每输入或删除一个字符都能响应事件，这就需要input事件。
4 表单验证
1验证长度
<input>标签元 素提供了 maxlength属性可以设置可输入的最大长度
2正则表达式验证
<head>
<meta charset="UTF-8"> <title>Document</title> <style>
span font-size: 12px; color: red
</style> </head> <body>
<form action="" id="myForm">
<h3 >正则表达式验证表单数据</h3>
<div>
用户名：
<input type="text" onchange="userNameCheck()">
</div>
<span></span>
vdivxbutton> 提交信息 v/buttonx/div> </form> vscript>
let userNameCheck = function()
//获取<span>标签
let span = document.getElementsByTagName("span")[0];
//创建正则表达式
let reg = /入[a-z]1\w5,9$/i;
//获取到文本框里面的内容
let value = document.getElementsByTagName("input")[0].value; if(value.length === 0) span.innerText = "";
else if(reg.test(value))
span.inne rText ="验证通过"；
else
span.inne rText ="首字符为字母，长度为6-10个字符的数字字母和下划线"
;
</script> </body>
效果：当输入内容不符合要求时，＜span＞标签的内容会被填充为,,首字符为字母，长度为6-10 个字符的数字字母和下划线"
5 HTML5中的表单控件
1新增的表单控件
1.email 类型
主要用于用户输入emaiI地址的，在提交表单时，会自动验证email输入框的值，如果不是一个有 效的email，则会报错
2.url类型
主要用于输入url地址的，在提交表单的时候，会自动验证url输入框里面的值，如果不是一个有效 的ur I地址，则会报错
3.number 类型
该类型控件只允许输入数值，并且我们还可以设置能够接受数字的范围
除此之外，还可以通过step属性来设置数值的间隔
4. range类型
用于输入包含一定数字范围的文本框，和number控件的作用大致一致，只不过表现形式是以滚动条的形式来展现的。和number控件一样，同样存在min , max以及step属性。
5.日期检查类型类型
日期控件 date
该控件类型支持设置最值属性
时间控件 time
本地日期事件控件 datetime-local
月控件month
周控件week
6.search 类型
提供用于搜索关键字的文本框，虽然外观看起来和text控件差不多，但是却带来了语义上的不同。
7.teI类型
tel类型主要用于输入电话号码
8.color 类型
专门用于设置颜色的控件
2新增的表单属性
1. autocomplete 属性
新增的autocomplete属性可以帮助用户在input类型的输入框中实现自动完成内容的输入。 支持的控件包括： text , sea rch , url , tel , email , passw ord , datepicke rs , r ange 以及color。autocomplete属性的值有2种：on和off，可以将该属性设置到form表单上，因为该属性是可以继承的。可以将autocomplete属性和datalist配合着使用
2.autofocus 属性
该属性可以让某些控件自动的获取光标焦点，常用于某些需要自动获取焦点的控件，例如向用户 展示许可协议时，默认的焦点就聚焦在同意这个按钮上面
3.form属性
通过form属性，我们可以采集到处 于<form＞以外的表单控件的内容，只需要在表单的form属性里面填写表单的id便可以和该 表单进行绑定
如果一个form属性要引用两个或者两个以上的表单，只需要用空格将表单的id间隔开即可
4.表单重写属性
新增的表单重写属性是一套属性，包括下面的属性：
form action、form enctype、form method、
form novalidate、formtar get。这里 讲一个for maction，其他的属性用法是一样的。之前的form表单，action属性表示将表单内 容提交到哪一个页面，但是有一个缺点就是所有的信息都会被提交到一个固定的页面，有 了 for maction以后，就可以将不同的信息提交到不同的页面。
5.list属性
该属性主要是和HTML5新增的＜datalist＞标签配合使用的，list属性里面写上＜datalist＞标签的id即可
6.最值属性
主要用于number , range , date等控件里面。
max：输入框允许的最大值
min：输入框允许的最小值
step：输入框输入数字时的数字间隔
7.multiple属性
这个属性可以用于设置下拉列表显示多个选项，或者上传文件时上传多个文件。
8.pattern 属性
直接将正则表达式 作为该属性的属性值即可
9.占位符属性
placeholder属性用于给文本框一个默认的内容
10.required 属性
为表单控件书写上该属性表示此项目为必须填写项目
11.novalidate 属性
该属性用于在提交表单时取消整个表单的验证，关闭对表单内所有元素的检查，如果只想取消一 个，那么就可以使用前面所讲的for mnovalidate属性单独用于表单里的某一个控件里面。
6 下拉列表和多选列表的使用
在select中加上multiple属性就变成多选列表。
1.增加元素
let newOption = new Option（"深圳","SZ"）;
其中第一个参数是option标签中间的文本，第二个参数是option的value值。
<select id="citySelect">
<option> 成都 </option>
<option> 北京 </option>
<option> 上海 </option>
</select>
<script>
let citySelect = document.getElementById("citySelect");
let newOption = new Option("深圳","SZ");
citySelect.options.add(newOption); console.log(citySelect.options);
</script>
citySelect.options获取的是列表中option的集合，这个集合不是数组，它是重新封装的集合对 象。所以增加元素的方法是add，而不是push。
2.修改元素
修改元素可以通过指定的下标找到要修改的option,然后通过value或text修改其中的内容。
citySelect.options[0].value = "GZ";
citySelect.options[0].text ="广州"；
3.删除元素
删除使用的是remove方法，同样通过下标指定要删除的项。
citySelect.options.remove(0);
如果要删除所有，可以直接将options的length属性设置为0。
citySelect.options.length = 0;
4.获取选中的元素
如果是下拉列表，由于只能选中一项，可以使用select元素的value属性来获取选中项的value 值，如：
console.log("你选中的是：",citySelect.value);
这个方法只能获取选中项的value，如果想要获取当中的文本，可以使用selectedlndex属性，它 得到的是获取选中项的下标，然后再利用该下标到o ption集合中找到对应的项，如：
console.log你选中的是：",citySelect.options[citySelect.selectedIndex].text);
如果是多选列表，由于选中的可能有多个，那还是需要循环集合，然后判断option的selected属 性是否为真。
let options = citySelect.options;
for(let i = 0;i < options.length;i++)
if(options[i].selected)
console.log("你选中的是："，options[i].text);
7 表单常见操作
1全选和反选
<body>
苹果<input type="checkbox" name="fruit" value="苹果">
香蕉<input type="checkbox" name="fruit" value="香蕉">
橘子<input type="checkbox" name="fruit" value="橘子">
榴莲<input type="checkbox" name="fruit" value="榴莲">
<div style="margin-top:5px;">
<button id="all">全选</button>
<button id="not">全不选</button>
<button id="reverse">反选</button>
</div>
<script>
let obj = document.getElementsByName("fruit");
//全选绑定事件
all.onclick = function()
for(let i=0;i<obj.length;i++)
obj[i].checked = true;
//全不选绑定事件
not.onclick = function()
for(let i=0;i<obj.length;i++)
obj[i].checked = false;
//反选绑定事件
reverse.onclick = function()
for(let i=0;i<obj.length;i++)
if(obj[i].checked ===true)
obj[i].checked = false;
else
obj[i].checked = true;
//更简便的方法直接取反,true变为false，false变为true
obj[i].checked = !obj[i].checked;
</script>
</body>
2下拉框特效
<body>
<h3>队伍配置</h3>
<select name="" id="sel1" size="8" multiple>
<option value="">赵信</option>
<option value="">泰达mier</option>
<option value="">希瓦娜</option>
<option value="">金克丝</option>
<option value="">索拉卡</option>
</select> <button id="toRight">>></button>
<button id="toLeft"><<</button>
<select name="" id="sel2" size="8" multiple>
<option value="">菲奥娜</option>
<option value="">伊芙琳</option>
<option value="">卡西奥胚芽</option>
<option value="">爱惜</option>
<option value="">莎娜</option>
</select>
<script>
//获取两个下拉列表
let sel1 = document.getElementById("sel1");
let sel2 = document.getElementById("sel2");
//为两个按钮添加事件
toRight.onclick = function()
let childs = sel1.childNodes;
for(let i=0;i<childs.length;i++)
if(childs[i].selected)
sel2.appendChild(childs[i]);
toLeft.onclick = function()
let childs = sel2.childNodes;
for(let i=0;i<childs.length;i++)
if(childs[i].selected)
sel1.appendChild(childs[i]);
</script>
</body>
3下拉列表联动
<body>
<!--准备三个下拉列表-->
<select name="" id="province">
<option value=""> 请选择国家 </option> </select>
<select name="" id="city">
<option value=""> 请选择城市</option〉 v/select>
<select name="" id="county">
<option value=""> 请选择区县 </option>
</select>
<script>
//模拟从服务器端获取到的数据
let pr ovinceData =["中国"，"日本”];
let cityData = [
["北京","上海","广州","深圳","成都"],
["东京","大阪","京都","名古屋","北海道"],
];
let countyData = [
[
["东城区"，”西城区"，”朝阳区"，”丰台区"，”石景山区"],
["黄浦区"，”徐汇区"，”长宁区"，”静安区"，”虹口区"],
["越秀区"，”荔湾区"，”海珠区"，”花都区"，”南沙区"],
["福田区"，”罗湖区"，”南山区"，”龙华区"，”宝安区"],
["锦江区"，”武侯区"，”青羊区"，”金牛区"，”高新区"]
],
[
["千代田区"，”新宿区"，”墨田区"，”中野区"，”品川区"],
["大正区","港区","鹤见区","旭区","天王寺区"],
["右京区"，”左京区"，”上京区"，”下京区"，”京都市"],
["热田区","北区","昭和区","中村区","守山区"],
["深川市","北广岛市","江别市","千岁市","惠庭市"] ]
];
//获取三个下拉列表的对象
let provinceObj = document.getElementById("province");
let cityObj = document.getElementById("city");
let countyObj = document.getElementById("county");
//首先将国家的信息新添加到第一个下拉列表里面
for(let i=0;ivprovinceData.length;i++)
//创建空的option选项
let newOption = document.createElement("option"); newOption.value = i;//设置option的属性值从0开始 newOption.inne rText = pr ovinceData[i];//设置 option 的文本值 pr ovinceObj.appendChild(newOption);//将 option 添加到第一个下拉列表
//监测第一个下拉列表，一旦选项有改变，做如下的操作
provinceObj.onchange = function()
//清空后面两个下拉列表的内容
cityObj.innerHTML = ""; countyObj.innerHTML = "";
//将第一个下拉列表的v alue值作为id号
let provinceID = provinceObj.value;
//如果id号为空，则后面两个下拉列表显示如下内容
if(provinceID === "")
let newOption = document.createElement("option");
newOption.inne rText ="请选择城市"；
cityObj.appendChild(newOption);
let newOption2 = document.createElement("option"); new0ption2.inne rText ="请选择区县"； countyObj.appendChild(newOption2);
else //否则显示相应的城市和区域信息
//将城市添加到第二个下拉列表里面
let citys = cityData[provinceID]；
for(let i=0；i<citys.length；i++)
let newOption = document.createElement("option")；
newOption.value = i；
newOption.innerText = citys[i]；
cityObj.appendChild(newOption)；
//因为默认是第一个城市，所以默认出现第一个城市所对应的区县 let counties = countyData[provinceID][0]； for(let i=0；i<counties.length；i++) let newOption = document.createElement("option")； newOption.value = i； newOption.innerText = counties[i]； countyObj.appendChild(newOption)；
//监测第二个下拉列表 cityObj.onchange = function()
//清空第三个下拉列表的内容
countyObj.innerHTML = ""；
//得到当前选择的国家ID和城市ID
let provinceID = provinceObj.value；
let cityID = cityObj.value；
//通过前面两个ID定位到对应的区县数组
let counties = countyData[provinceID][cityID]；
//遍历然后添加节点
for(let i=0；i<counties.length；i++) let newOption = document.createElement("option")； newOption.value = i； newOption.innerText = counties[i]； countyObj.appendChild(newOption)；
</script>
</body>
效果：
请选择国家0 请选择城市0 请选择区县0
选择"中国"以后，自动出现第一个城市和与第一个城市相关的区县
主要就是对前面两个下拉列表的内容变化进行监听，然后动态的给每个下拉列表添加 上 voption> 元素。
以上是关于JavaScript中的表单编程的主要内容，如果未能解决你的问题，请参考以下文章