JavaScript 表单_表单对象的常用方法有:-CSDN博客

本文链接：https://blog.csdn.net/u013983033/article/details/107039202

form(表单)

form(表单)对于每个Web开发人员来说，应该是再熟悉不过的东西了，它是页面与Web服务器交互过程中最重要的信息来源。表单form的常用属性和常用的控件input如下：

1、form action 属性

action 属性规定当提交表单时，向何处发送表单数据。当提交表单时，发送表单数据到名为"a.html "的文件（处理输入）：

<form action="a.html " method="get" >
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="提交">
 </form>

2、form method属性

method属性可设置或者返回表单method属性值。制订了如何发送表单数据 (表单数据提交地址在action属性中指定)。
method 属性可以是get，在 URL 中添加表单数据，也可以使用使用post方法提交表单数据。

<form action="a.php " method="get" >
         学号: <input type="text" name="stuId">  

            <input type="submit" value="查询">
 </form>

3、表单控件

3.1、 input控件

input表示form表单中的一种输入对象，其又随type类型的不同而分为文本输入框，type="password"为密码输入框，type=“radio”/type="checkbox"为单选/复选框，type="button"为普通按钮等。其中type=“text”，表示输入类型是文本框,输入单行文本，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是input的默认类型。

input控件的常用属性如下：

name：同样是表示的该文本输入框名称。
size：输入框的长度大小。 maxlength：输入框中允许输入字符的最大数。
value：输入框中的默认值，根据表单name属性值和文本框name属性值可以访问到文本框对象，再访问文本框value的属性就可以得到文本框中的值。这种方式同样使用于密码框，和下拉列表框。如下:表单名称.控件名称.value 或表单名称.elements[下标] .value
readonly：表示该框中只能显示，不能添加修改
placeholder：是指文本框或处于未输入状态并且未获得光标焦点时，降低显示输入提示文字不透明度，如搜索框效果：

<input
   type="text"
   placeholder="点击这里搜索">

，由于placeholder是html5的新属性，仅支持html5的浏览器才支持placeholder。

实现form表单提交的onclick和onsubmit：
type= “submit” and type=“reset”，分别是“提交”和“重置”两按钮。submit主要功能是将form中所有内容进行提交action页处理，reset则起快速清空所有填写内容的功能。在表单中加上οnsubmit="return false;"可以阻止表单提交。
onsubmit只能表单上使用,提交表单前会触发, onclick是普通按钮等控件使用, 用来触发点击事件。在提交表单前，一般都会进行数据验证，可以选择在按钮上的onclick中验证,也可以在表单上的onsubmit中验证。

下表列出了表单对象的常用属性、方法。示例中myForm是一个表单对象。
表单对象常用方法

方法	意义	示例
reset()	将表单中各元素恢复到缺省值，与单击重置按钮（reset）的效果是一样的	myForm.reset()
submit()	提交表单，与单击提交按钮（submit）效果是一样的	myForm.submit()

4、表单控件元素对象的常用方法和input 控件常用方法

方法	意义
blur()	让光标离开当前元素
focus()	让光标落到当前元素上
select()	用于种类为text，textarea，password的元素，选择用户输入的内容
click()	模仿鼠标单击当前元素

表单对象常用事件：onfocus：在表单元素收到输入焦点时触发；onblur：在表单元素失去输入焦点时触发。如：文本框失去焦点时，以下代码将调用myfun()函数。

<input type="text" value="" name="txtName" onblur ="myfun( )" >

5、Select 对象

Select 对象代表 HTML 表单中的一个下拉列表。
在 HTML 表单中，标签每出现一次，一个 Select 对象就会被创建。
您可通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。

5.1、Select 对象集合

集合	描述
options[]	返回包含下拉列表中的所有选项的一个数组。

5.2、Select 对象属性

属性	描述
disabled	设置或返回是否应禁用下拉列表。
form	返回对包含下拉列表的表单的引用。
id	设置或返回下拉列表的 id。
length	返回下拉列表中的选项数目。
multiple	设置或返回是否选择多个项目。
name	设置或返回下拉列表的名称。
selectedIndex	设置或返回下拉列表中被选项目的索引号。
size	设置或返回下拉列表中的可见行数。
tabIndex	设置或返回下拉列表的 tab 键控制次序。
type	返回下拉列表的表单类型。

5.3、Select 对象方法

方法	描述
add()	向下拉列表添加一个选项。
blur()	从下拉列表移开焦点。
focus()	在下拉列表上设置焦点。
remove()	从下拉列表中删除一个选项。

5.4、Select 对象事件句柄

事件句柄	描述
onchange	当改变选择时调用的事件句柄。

6、操作表单

用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。
不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。
HTML表单的输入控件主要有以下几种：
• 文本框，对应的，用于输入文本；

•	口令框，对应的<input type="password">，用于输入口令；

•	单选框，对应的<input type="radio">，用于选择一项；

•	复选框，对应的<input type="checkbox">，用于选择多项；

•	下拉框，对应的<select>，用于选择一项；

•	隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

6.1、获取值

如果我们获得了一个节点的引用，就可以直接调用value获得对应的用户输入值：

<input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'

这种方式可以应用于text、password、hidden以及select。但是，对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断：

<label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
<label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

6.2、设置值

设置值和获取值类似，对于text、password、hidden以及select，直接设置value就可以：

<input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@qq.com'; // 文本框的内容已更新

对于单选框和复选框，设置checked为true或false即可。

6.3、HTML5控件

HTML5新增了大量标准控件，常用的包括date、datetime、datetime-local、color等，它们都使用标签：

<input type="date" value="2015-07-01">
2015-07-01
<input type="datetime-local" value="2015-07-01T02:03:04">
2015-07-01T02:03:04
<input type="color" value="#ff0000">

不支持HTML5的浏览器无法识别新的控件，会把它们当做type="text"来显示。支持HTML5的浏览器将获得格式化的字符串。例如，type="date"类型的input的value将保证是一个有效的YYYY-MM-DD格式的日期，或者空字符串。

6.4、提交表单

JavaScript可以以两种方式来处理表单的提交

方式一是通过<form>元素的submit()方法提交一个表单，例如，响应一个<button>的click事件，在JavaScript代码中提交表单：

<!-- HTML -->
<form id="test-form">
    <input type="text" name="test">
    <button type="button" onclick="doSubmitForm()">Submit</button>
</form>

<script>
function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
}
</script>

这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。

第二种方式是响应本身的onsubmit事件，在提交form时作修改：

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 继续下一步:
    return true;
}
</script>

注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。

7、数据验证

1.	数据验证
	数据验证用于确保用户输入的数据是有效的。
2.	典型的数据验证有：
    必需字段是否有输入?
    用户是否输入了合法的数据?
    在数字字段是否输入了文本?
    
3.大多数情况下，数据验证用于确保用户正确输入数据。
4.	数据验证可以使用不同方法来定义，并通过多种方式来调用。
5.	服务端数据验证是在数据提交到服务器上后再验证。
6.	客户端数据验证 side validation是在数据发送到服务器前，在浏览器上完成验证。

7.	HTML 约束验证
    HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。
  约束验证是表单被提交时浏览器用来实现验证的一种算法。
  约束验证 HTML 输入属性

属性	描述
disabled	规定输入的元素不可用
max	规定输入元素的最大值
min	规定输入元素的最小值
pattern	规定输入元素值的模式
required	规定输入元素字段是必需的
type	规定输入元素的类型

具体例子

<!DOCTYPE html>
		<html>
		<head>
		<meta charset="utf-8">
		</head>
		<body>
		 
		<h1>JavaScript 验证数字输入</h1>
		 
		<p>请输入 1 到 10 之间的数字：</p>
		 
		<input id="numb">
		 
		<button type="button" onclick="myFunction()">提交</button>
	 
		<p id="demo"></p>
		 
		<script>
		function myFunction() {
		    var x, text;
	 
	    // 获取 id="numb" 的值
		    x = document.getElementById("numb").value;
		 
	    // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
		    if (isNaN(x) || x < 1 || x > 10) {
		        text = "输入错误";
		    } else {
	        text = "输入正确";
		    }
		    document.getElementById("demo").innerHTML = text;
		}
		</script>
		 
		</body>
		</html>

1 required:验证当前元素之是否为空；
2 pattern: 使用正则表达式验证当前元素值是否匹配，不能验证内容是否为null；
3 min和max: 验证当前元素值最大值或最小值，一般使用与number/range等元素；
4 minlength和maxlength:验证当前元素值的最小长度和最大长度；
5 validity:表单验证HTML5提供一种有效状态, 有效状态通过 validityState对象获取到

	具体例子

<!DOCTYPE html>
		<html>
	    <head>
	        <meta charset="UTF-8">
	        <title>表单简单验证</title>
	    </head>
	    <body>
	       <h2>用户登录</h2>
	        <form name="cform" method="post" action="123.php" onsubmit="return checkForm();">
		            用户账号： <input name="user"><br />
		            用户密码： <input name="pass" type="password"><br />
		            <input type="submit" value="验  证">
		        </form>
		        <script>
		            function checkForm() {
		                var user = cform.user.value;
		                var pass = cform.pass.value;
		                if (user.length < 2) {
		                    alert("用户名不少于2位");
		                    return false;
		                }
		                var str_temp = user.substr(0, 1);
		                if (!((str_temp >= "a" && str_temp <= "w") || (str_temp >= "A" && str_temp <= "W"))) {
		                    alert("用户名第一个字符需为字母!");
		                    return false;
		                }
		                if (pass.length < 6 || pass.length > 15) {
		                    alert("密码长度须在6-15之间!");
		                    return false;
		                }
		                return true;
		            }
		        </script>
		 
	    </body>
		</html>