JavaScript 表单脚本

墨蓝 2022-09-24 03:28 140阅读 0赞

理解表单

JavaScript最初的一个应用，就是分担服务器处理表单的责任，打破处处依赖服务器的局面，现在表单已经成为开发Web程序必不可少的一部分了，可是我们又对它了解多少啦，下面一起来了解一下表单；

表单的基础知识

在HTML中，表单是由<form>元素来表示额，而在JavaScript中，表单对应的则是HTMLForm-Element类型。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属性。

取得<form>元素的方式有好几种，通常用的最多的是把里面的元素当成dom，为其添加ID属性，通过id来定位。

还可以通过document,forms来获取页面中所有的表单。然后通过数值索引或name值来取得特定的表单。

var firstForm=document.forms[0]; //取得页面中的第一个表单
    var myForm=document,forms["form2"];//取得页面中名称为"form2"的表单

提交表单

用户点击按钮或图像按钮时，就会提交表单；使用<input>或<button>都可以定义提交按钮，只要将其type特性的值设置为"submit"即可。当然也可以通过自定义函数来提交表单；

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
     </head>
     <body>
    	<form method="post" id="form1" action="#">
    		请输入账号<input type="text"></input><br>
    		请输入密码<input type="password"></input><br>
    		<input type="submit"></input>
    	</form>
     </body>
    </html>

以上是普通的表单提交，当然可以可以使用事件绑定提交的方式

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
     </head>
     <body>
    	<form method="post" id="form1" action="#">
    		请输入账号<input type="text"></input><br>
    		请输入密码<input type="password"></input><br>
    		<input type="button" value="提交" οnclick="submit()"></input>
    	</form>
     </body>
     <script>
    		function submit(){
    			var form=document.getElementById("form1");
    			form.submit();
    		}
     </script>
    </html>

以函数事件提交的方式，使得我们可以在浏览器发送请求给服务器之前触发submit，这样我们就有事件来验证表单数据，并决定最终是否要提交表单；

重置表单：

在用户单击重置按钮时，表单会被重置。使用type特性值为"reset"的<input>或<button>可以创建重置按钮

表单字段

可以把表单里面的字段当成DOM的形式来访问和处理。另外，每个表单都有elements属性，该属性是表单中所有元素的集合。这个elements集合是一个有序列表，其中包含着表单中的所有字段，例如<input>,<textarea>.<button>和<fieldset>。每个表单字段在elements集合中的顺序，与它们出现在标记中的属性一致，可以按照位置和name的特性来访问它们。

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

共有的表单字段属性

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

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

name:当前字段的名称。

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

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

type:当前字段的类型，如"checkbox","radion",等等。

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

共有的表单字段方法

每个表单的字段都有两个方法:focus()和blur()。其中,focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。

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

请输入账号<input type="text" name="loginNo" autofocus></input><br>