JavaScript--表单脚本

作者: 范小饭_ | 来源:发表于2018-11-10 11:41 被阅读24次

一万字的内心戏就省略了，反正我又开始复习了，之前整理过的也不定时再更新一下，嗯，就酱。

首先，我们需要一个跨浏览器的事件对象，以便我们可以兼容,全文都会用到这个事件对象

var EventUtil = {
        addHandler: function(element, type, handler){
//省略的代码 },
        getEvent: function(event){
            return event ? event : window.event;
},
        getTarget: function(event){
            return event.target || event.srcElement;
},
        preventDefault: function(event){
            if (event.preventDefault){
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
},
        removeHandler: function(element, type, handler){
//省略的代码
 },
        stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
  } 
}
};

一、表单

1.1 表单的基础知识

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

获取表单元素的方式
1、var form = document.getElementById("form1");// 通过id查找
2、var firstForm = document.forms[0]; //取得页面中的第一个表单
3、var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单

1.2提交表单

使用<input>或<button>都可以定义提交按钮，只要将其 type 特性的值设置为"submit"即可

<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>

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

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

提交表单时可能出现的最大问题，就是重复提交表单,解决这一问题的办法有两个:在第一次提交表单后就禁用提交按钮，或者利用 onsubmit 事件处理程序取消后续的表单提交操作。

1.3 重置表单

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

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

用户单击重置按钮重置表单时，会触发 reset 事件。利用这个机会，我们可以在必要时取消重置操作。例如，下面展示了阻止重置表单的代码。

 var form = document.getElementById("myForm");
    EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
        EventUtil.preventDefault(event);
    });
与提交表单一样，也可以通过 JavaScript 来重置表单，如下面的例子所示。 var form = document.getElementById("myForm");
//重置表单 form.reset();
与调用 submit()方法不同，调用 reset()方法会像单击重置按钮一样触发 reset 事件。

1.3 表单字段

每个表单都有elements 属性，该属性是表单中所有表单元素(字段)的集合。

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

共有的表单字段属性
除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。

disabled:布尔值，表示当前字段是否被禁用。
form:指向当前字段所属表单的指针;只读。
name:当前字段的名称。
readOnly:布尔值，表示当前字段是否只读。
tabIndex:表示当前字段的切换(tab)序号。
type:当前字段的类型，如"checkbox"、"radio"，等等。
value:当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件
在计算机中的路径。

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

以上代码为表单的 submit 事件添加了一个事件处理程序。事件触发后，代码取得了提交按钮并将其 disabled 属性设置为 true。注意，不能通过 onclick 事件处理程序来实现这个功能，原因是不同浏览器之间存在“时差”:有的浏览器会在触发表单的 submit 事件之前触发 click 事件，而有的浏览器则相反。对于先触发 click 事件的浏览器，意味着会在提交发生之前禁用按钮，结果永远都不会提交表单。因此，最好是通过 submit 事件来禁用提交按钮。不过，这种方式不适合表单中不包含提交按钮的情况;如前所述，只有在包含提交按钮的情况下，才有可能触发表单的 submit 事件。

共有的表单字段事件
除了支持鼠标、键盘、更改和 HTML 事件之外，所有表单字段都支持下列 3 个事件。
blur:当前字段失去焦点时触发。
change:对于<input>和<textarea>元素，在它们失去焦点且 value 值改变时触发;对于
<select>元素，在其选项改变时触发。
focus:当前字段获得焦点时触发。
当用户改变了当前字段的焦点，或者我们调用了 blur()或 focus()方法时，都可以触发 blur 和 focus 事件。这两个事件在所有表单字段中都是相同的。但是，change 事件在不同表单控件中触发的次数会有所不同。对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且 value 值改变时，才会触发 change 事件。对于<select>元素，只要用户选择了不同的选项，就会触发 change 事件; 换句话说，不失去焦点也会触发 change 事件。

例如，假设有一个文本框，我们只允许用户输入数值。此时，可以利用 focus 事件修改文本框的背景颜色，以便更清楚地表明这个字段获得了焦点。可以利用 blur 事件恢复文本框的背景颜色，利用 change 事件在用户输入了非数值字符时再次修改背景颜色。下面就给出了实现上述功能的代码

var textbox = document.forms[0].elements[0];

EventUtil.addHandler(textbox, "focus", function(event){
        event = EventUtil.getEvent(event);

  var target = EventUtil.getTarget(event);
    if (target.style.backgroundColor != "red"){
        target.style.backgroundColor = "yellow";
} 
});
EventUtil.addHandler(textbox, "blur", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if (/[^\d]/.test(target.value)){
        target.style.backgroundColor = "red";
    } else {
        target.style.backgroundColor = "";
} 
});
EventUtil.addHandler(textbox, "change", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if (/[^\d]/.test(target.value)){
        target.style.backgroundColor = "red";
           } else {
        target.style.backgroundColor
} 
});

文本框脚本
在 HTML 中，有两种方式来表现文本框:一种是使用<input>元素的单行文本框，另一种是使用 <textarea>的多行文本框。这两个控件非常相似，而且多数时候的行为也差不多。不过，它们之间仍然存在一些重要的区别。

<input>元素的 type 特性设置为"text"
size：可以指定文本框中能够显示的字符数
value：可以设置文本框的初始值
maxlength：特性则用于指定文本框可以接受的最大字符数
<input type="text" size="25" maxlength="50" value="initial value">

多行文本textarea
rows：指定的是文本框的字符行数
cols：指定的是文本框的字符列数
<textarea rows="25" cols="5">initial value</textarea>

选择文本

选择(select)事件

var textbox = document.forms[0].elements["textbox1"];
    EventUtil.addHandler(textbox, "select", function(event){
        var alert("Text selected" + textbox.value);
    });

取得选择的文本

function getSelectedText(textbox){
   return textbox.value;
  }

选择部分文本

textbox.value = "Hello world!"
//选择所有文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//选择前 3 个字符 textbox.setSelectionRange(0, 3); //"Hel"
//选择第4到第6个字符 textbox.setSelectionRange(4, 7); //"o w"

过滤输入

屏蔽字符
例如，下列代码只允许用户输入数值。

EventUtil.addHandler(textbox, "keypress", function(event){ 12 event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
        if (!/\d/.test(String.fromCharCode(charCode))){
    EventUtil.preventDefault(event);
  }
});

二、HTML5 约束验证API

为了在将表单提交到服务器之前验证数据，HTML5 新增了一些功能。有了这些功能，即便 JavaScript 被禁用或者由于种种原因未能加载，也可以确保基本的验证

1、required：必填字段
2、type：其他输入类型

<input type="email" name ="email">
<input type="url" name="homepage">

3.、数值范围
"number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week"， 14 还有"time"
浏览器对这几个类型的支持情况并不好，因此如果真想选用的话，要特别小心。
<input type="number" min="0" max="100" step="5" name="count">
4、输入模式
pattern属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。
<input type="text" pattern="\d+" name="count">
4、禁用验证
通过设置 novalidate 属性，可以告诉表单不进行验证。

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

饿了，吃饭，先酱

JavaScript--表单脚本

一、表单

1.1 表单的基础知识

1.2提交表单

1.3 重置表单

1.3 表单字段

二、HTML5 约束验证API

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端攻城狮