Javascript-表单脚本

2018-01-31 本文已影响0人 Tom36

一、表单的基础知识

1、表单提交

普通提交

<!-- 通用提交按钮 -->
<input type="submit" vlaue="提交按钮">
<!-- 自定义提交按钮 -->
<button type="submit">提交按钮</button>
<!-- 图片提交按钮 -->
<input type="image" src="click.png">

以编程方式调用submit()方法提交表单

var form  = document.getElementById("myForm");
form.submit();

解决表单重复提交的办法：
1、表单提交后就禁用提交按钮
2、利用onsubmit 事件处理程序取消后续的表单提交操作

2、表单重置

普通重置

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

reset()方法重置

var form  = document.getElementById("myForm");
form.reset();

3、表单字段

每个表单都有elements属性
elements 集合是一个有序列表，其中包含着表单中的所有字段

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="" id="form1">
            <input type="text" name="textbox1">
            <input type="text" name="textbox2">
            <button>button</button>
        </form>
        <script>
            var form = document.getElementById("form1");
            //取得表单中的第一个字段
            var field1 = form.elements[0];
            //取得名为“textbox2"的字段
            var field2 = form.elements["textbox2"];
            //取得表单中包含的字段的数量
            var fieldCount = form.elements.length;
        </script>
    </body>
</html>

如果有多个表单控件都在使用一个name（如单选按钮），那么就会返回以该name 命名的一个NodeList。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="" id="myForm">
            <ul>
                <li>
                    <input type="radio" name="color" value="red" />
                    Red
                </li>
                <li>
                    <input type="radio" name="color" value="yellow" />
                    Yellow
                </li>
                <li>
                    <input type="radio" name="color" value="blue" />
                    Blue
                </li>
            </ul>
        </form>
        <script>
            var form = document.getElementById("myForm");
            var colorFields = form.elements["color"];
            alert(colorFields.length);  //3
            var firstColorField = colorFields[0];
            var firstFormField = form.elements[0];
            alert(firstColorField === firstFormField);  //true
        </script>
    </body>
</html>

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

//修改value属性
field1.value="another value";
alert(field1.form === form);
//把焦点设置到当前字段
field1.focus();
//禁用当前字段
field1.disabled = true;

注意：当我们在提交表单禁用提交按钮的时候，应该在“submit”事件添加事件处理函数。不要用click。因为不同的浏览器存在时差，有的浏览器会在触发表单的submit事件之前触发click事件，有的在这之后。

共有的表单字段方法
focus() 设置焦点
blur() 删除焦点
HTML5 为表单字段新增了一个autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript 就能自动把焦点移动到相应字段
共有的表单字段事件
blur：当前字段失去焦点时触发。
change：对于<input>和<textarea>元素，在它们失去焦点且value 值改变时触发；对于<select>元素，在其选项改变时触发。
focus：当前字段获得焦点时触发。

二、文本框脚本

在HTML 中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。
input文本框
size属性：制定文本框中能够显示的字符数
maxlength属性:指定文本框可以接收的最大字符数
value属性：文本框的初始值

<input type="text" size="25" maxlength="50" value="initial value">

textarea多行文本框
rows属性：文本框的字符行数
cols属性：文本框的字符列数

1、选择文本

select()方法
这个方法用于选择文本框中的所有文本

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="">
            <input type="text" size="5"maxlength="8" value="222">
        </form>
        <script src="eventUtil.js"></script>
        <script>
            var textbox = document.forms[0].elements[0];
            textbox.onfocus = function(){
                textbox.select();
            }
        </script>
    </body>
</html>

以上代码实现的是只要这个文本框获得焦点，则会选中所有文本。

select事件 在选择了文本框中的文本时，就会触发select事件
取得选择的文本
selectionStart
selectionEnd
ie9以上支持
选择部分文本
setSelectionRange()方法
ie9以上支持

2、过滤性输入

有时候根据具体需求我们会要求用户在文本框中输入特定格式的数据，比如电话号码的位数，邮箱的格式，我们可以通过DOM和事件的综合运用实现。
操作剪贴板
略……

3、自动切换焦点

keyup 事件会在用户输入了新字符之后触发

4、HTML5约束验证API

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

必填字段
required
其他输入类型

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

数值范围

<input type="text" min="0" max="100" step="5" name="count">

输入模式
pattern属性:这个属性的值是一个正则表达式，用于匹配文本框中的值
检测有效性
使用checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有个方法，如果字段的值有效，这个方法返回true，否则返回false。字段的值是否有效的判断依据是本节前面介绍过的那些约束。换句话说，必填字段中如果没有值就是无效的，而字段中的值与pattern 属性不匹配也是无效的。
禁用验证
novalidate 属性

三、选择框脚本

实际用到的话再回过头看……