大大怪将军鸭
大大怪将军鸭

JavaScript ---表单脚本总结

文章目录

  • 表单基础知识
    • 1、提交表单
    • 2、重置表单
    • 3、表单字段
  • 文本框脚本
    • 1、选择文本
    • 2、过滤输入
    • 4、HTML5 约束验证API
  • 选择框脚本
    • 1、添加选项
    • 2、移除选项
    • 3、移动和重排选项

表单基础知识

在JavaScript中，表单对应的是HTMLFormElement 类型，它继承了HTMLElement 。

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

document.forms 可以获取页面中的所有表单，返回一个集合，在这个集合中可以通过数值索引或者name值来获取特定的表单。

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


1、提交表单

用户点击按钮或者图像时

   
    <input type="submit" value="Submit Form">
    
    <button type="submit">Submit Form</button>
    
    <input type="image" src="graphic.gif">  //图像也可以作为提交按钮

在JavaScript中，可以用submit() 方法也可以提交表单。注意：在调用submit() 方法提交表单的时候，不会触发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);
});

2、重置表单

重置按钮：


<input type="reset" value="Reset Form">

<button type="reset">Reset Form</button>

在JavaScript中，可以用 reset() 方法也可以重置表单。注意：在调用 reset() 方法提交表单的时候，会一样触发 reset 事件。

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);
});

3、表单字段

每个表单都有一个element 属，它是表单中所有表单元素的集合。是一个有序列表。

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

1、共有的表单字段属性

  • disabled:布尔值，表示当前字段是否被禁用。
  • form:指向当前字段所属表单的指针;只读。
  • name :当前字段的名称。
  • readonly:布尔值，表示当前字段是否只读。
  • tabIndex:表示当前字段的切换( tab)序号。
  • type:当前字段的类型，如" checkbox"、“radio”,等等。
  • value:当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件
    在计算机中的路径。
var form = document.getElementById("myForm");
var field = form.elements[0];
//修改value 属性
field.value = "Another value";
//检查 form 属性的值
alert(field.form === form); //true
//把焦点设置当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改 type 属性（不推荐，但对是可行的）
field.type = "checkbox";

防止多次点击提交按钮

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

除了

之外 ，所有表单都有 type 属性。但是和