JavaScript的表单操作

最新推荐文章于 2023-03-11 18:34:12 发布
最新推荐文章于 2023-03-11 18:34:12 发布
阅读量583 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52102646/article/details/121427615
版权

你好！ 这是我自己编辑的一些知识点。如果你想学习JavaScript的有关知识, 可以仔细阅读这篇文章，了解一下关于JavaScript的基本语法知识。

JavaScript的表单操作

表单操作

获取表单

获取表单元素

获取表单元素的方式，大体可以分为以下几种方式：

1.Document对象提供的定位页面元素的一系列方法

<form id="myform" name='myform' class='login' action='#'></form>
<script>
    var formid=document.getElementById('myform');
    var formName=document.getElementsByName('form');
    var formElement=document.getElementsByTagName('form')[0];
    var formClass=document.getElementsByClassName('login')[0];
    
    var formld2=document.querySelector('#myform');
    var formElement2=document.querySelectorAll('form')[0];
</script>

2.Document对象提供了forms属性

该属性用于获取当前HTML页面中所有表单的集合，返回HTML Collection对象，该对象封装了当前HTML页面中的所有表单对象。

<form id='myform' name='myform' class='login' action='#'></form>
<script>
    var forms=document.forms;
    console.log(forms);
</script>

上述示例代码运行结果如右图所示：

5mx4II.png

3.Document对象通过表单的name属性值获取指定表单元素

较早的浏览器还会将定义了name属性的表单保存在document对象中。

<form id='myform' name='myform' calss='login' action='#'></form>
<scrippt>
    var form=document.myform;
    console.log(form);
</scrippt>

注意：这种方式并不推荐，因为在新版本的浏览器中可能不再支持。

获取表单的组件元素

获取表单组件的方式，大体可以分为以下几种方式：

1.Document对象提供的定位页面元素的一系列方法

<form id='myform' name='myform' class='login' actiom='#'>
    用户名：<input type='text' id='username' name='username'><br>
    密码：<input type='password' id='password' name='password'><br>
    <input type='submit'>
</form>
<script>
    var username=document.getElementById('username');
    var password=document.getElementsByName('password');
</script>

2.HTMLFormElement对象的elements属性

该属性用于获取指定表单的所有组件的集合。

<form id='myform' name='myform' class='login' action='#'>
    用户名：<input type='text' id='username' name='username'><br>
    密码：<input type='password' id='password' name='password'><br>
    <input type='submit'>
</form>
<script>
    var myform=document.forms[0];
    var formElements=myform.elements;
    console.log(formElement);
</script>

注意：HTMLFormElement对象提供了elements属性获取的表单组件中，不包含type为image的input元素。

表单操作

文本框的操作

input元素对应DOM中的对象是HTMLInputElement对象，而textarea元素对应DOM中的对象是HTMLTextAreaElement对象。

HTMLInputElement对象和HTMLTextAreaElement对象的共同父级对象是HTMLElement对象。所以，这两个对象在很多操作上是比较相似的。

文本内容的选择

HTMLInput对象和HTMLTextAreaElement对象都提供了select()方法，该方法用于选择当前文本框的所有文本内容。

<form id='myform' action='#'>
    <input type='text' id='username' name='username' value='请输入您的用户名'>
</form>
<script>
    var username=document.getElementBy('username');
    username.select();
</script>

select事件

select()方法对应着select事件。也就是说，当调用select()方法时，会触发select事件。

<orm id='myform' action='#'>
    <input type='text' id='username' name='username' value='请输入你的用户名'>
</orm>
<script>
    var username=document.getElementById('username');
    username.addEventListener('select',function(){
        console.log('this input element"s select() ');
    });
</script>

获取选择的文本内容

select事件只是让我们知道用户在什么时候选择了指定文本框的文本内容，但并不是让我们知道用户选择了什么文本内容。

HTML5新版本中通过新增两个属性来解决用户选择了什么文本内容的问题。

属性名称描述
selectionStart选择文本内容的开始索引值
selectionEnd选择文本内容的结束索引值

注意：IE8及之前版本的浏览器并不支持上述两个属性，而是提供了document.selection对象，用于保存整个HTML页面文档范围内选择的文本内容。

例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#">
        <input type="text" id='username' value="请输入您的名字">
        <input type="submit">
    </form>
    <script>
        //HTMLInputElement对象
        var username = document.getElementById('username');
        // 绑定获取焦点事件(focus) - 失去焦点(blur)事件
        username.addEventListener('focus', function() {
            // select()方法 - 选择当前输入框中的所有文本内容(全选)
            username.select();
        });
        // select事件 
        // *只要选择对应元素的文本内容时被触发
        // *select()方法
        username.addEventListener('select', function() {
            // HTMLInputElement对象
            // *selectionStart - 表示用户选中文本内容的开始索引值
            // *selectionEnd - 表示用户选中文本内容的结束索引值的下一个值
            console.log(username.selectionStart, username.selectionEnd);
            var value = username.getAttribute('value');
            var res = value.substring(username.selectionStart, username.selectionEnd);
            console.log(res);
        });
    </script>
</body>

</html>

设置部分的文本内容

HTML5新版本中提供了setSelectionRange()方法，该方法用于设置一个获取焦点的文本框中选择指定的文本内容。

inputEleent.setSelectionRange(selectionStart,selectionEnd,[optional] selectionDirection);

上述语法格式中的参数，具体说明如下：

参数名称描述
selectionStart被选中的第一个字符的位置
selectionEnd被选中的最后一个字符的下一个位置
selectionDirection一个指明选择方向的字符串。有forward、backward、none3个可选值，分别表示‘从前往后’，‘从后往前’，‘选择方向未知或不重要’

注意：IE8及之前版本的浏览器并不支持这个方法。

例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#">
        <input type="text" name="" id="username" value="请输入您的姓名">
        <input type="submit" name="" id="">
    </form>

    <script>
        var form = document.forms[0];
        var username = form.elements[0];
        username.addEventListener('focus', function() {
            // setSelectionRange()方法
            // *作用 - 设置选择的文本内容
            // *注意
            // *焦点在文本内容的最后面 - select()方法(全选)
            // *焦点在设置文本内容的范围内有效

            username.setSelectionRange(0, 1);
        });
    </script>
</body>

</html>

操作剪切板

剪切板功能是经常被忽略，却很重要的功能，可以增强用户体验，方便用户交互。

事件名称描述
copy在发生复制操作时触发，对应的快捷键为Ctrl/Cmd+C
cut在发生剪切操作时触发，对应的快捷键为Ctrl/Cmd+X
paste在发生粘贴操作时触发，对应的快捷键为Ctrl/Cmd+V

事件对象的clipboardData属性存储了由用户触发剪切板事件时所影响的带有MIME类型的数据。

注意：IE8及之前版本的浏览器，clipboardData属性需要通过window对象获取。

var clipboardData=event.clipboardData || wondow.clipboardData;

该属性得到的是一个DataTransfer对象，该对象提供了操作数据的常用方法，如下表所示：

方法名称描述
setData(in String type,in String data)为一个给定的类型设置数据
getData(in String type)根据指定的类型检索数据
clearData(in String type)删除与给定类型关联的数据

例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#">
        <input type="text" name="" id="username" value="请输入您的用户名">
        <input type="text" name="" id="username2">
        <input type="submit" name="" id="">
    </form>
    <script>
        // var res;
        var username = document.getElementById('username');
        username.addEventListener('copy', function() {
            // 得到DataTransfer对象
            // *setData()方法 - 设置数据内容
            var data = event.clipboardData || window.clipboardData;
            console.log(data);
            console.log('这是一个复制操作。');

            var value = username.value;
            var res = value.substring(username.selectionStart, username.selectionEnd);
            console.log(res);
            data.setData('text', res);
        });
        username.addEventListener('cut', function() {
            console.log('这是一个剪切操作。');
        });
        var username2 = document.getElementById('username2');
        username2.addEventListener('paste', function(event) {

            event.preventDefault();
            // 得到DataTransfer对象
            // *getData()方法 - 获取数据内容
            var data = event.clipboardData || window.clipboardData;
            var res = data.getData('text');
            if (res === '用户名') {
                res = '***';
            }
            username2.value = res;
        });
    </script>
</body>

</html>

下拉列表的操作

下拉列表是由select和option元素创建的。select元素在DOM中对应的是HTMLSelectElement对象，option元素在DOM中对应的是HTMLOptionElement对象，这两个对象都提供了一些属性和方法，方便操作下拉列表。

HTMLSelectElement对象

HTMLSelectElement对象是select元素在DOM中对应的对象。

  • 该对象提供的属性如下表所示：
属性名称描述
length表示当前select元素中option元素的 个数
multiple表示select元素是否允许多项选择，等价于HTML中的multiple属性
options当前select元素中option元素对象的集合
selectsdIndex代表第一个被选中的option元素。-1代表没有元素被选中
size当前select元素中可见的行数，等价于HTML中的size属性
  • 该对象提供的方法如下表所示：
方法描述
add(item[,before])将option元素添加到当前select元素的选项元素集合中
item(idx)放回索引值为idx的option元素。如果没有，则返回null
remove(index)从当前select元素的选项元素集合中删除指定索引值的option元素

HTMLOptionElement对象

HTMLOptionElement对象是option元素在DOM中对应的对象。

  • 该对象提供的属性如下表所示：
属性名称描述
index当前option元素在其所属的选项列表中的索引值
selected表示当前option元素是否被选中
text当前option元素的文本内容
value当前option元素的value属性值

例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#">
        <select name="" id="city">
            <option id="bj" value="bj">北京</option>
            <option value="nj">南京</option>
            <option value="tj">天津</option>
        </select>
        <select name="" id="city2" multiple size="5">
            <option value="bj">北京</option>
            <option value="nj">南京</option>
            <option value="tj">天津</option>
        </select>
    </form>
    <script>
        // HTMLSelectElement对象
        var city = document.getElementById('city');
        // 属性
        console.log(city.length);
        console.log(city.options);
        console.log(city.selectedIndex); //被选中<option>的索引值
        var city2 = document.getElementById('city2');
        // size属性默认值为0
        console.log(city2.size);

        console.log(city2.item(1));
        city2.remove(2);
        var bj = document.getElementById('bj');
        console.log(bj.index); //0
        console.log(bj.selected); //true
        console.log(bj.text); //北京
        console.log(bj.value); //bj
    </script>
</body>

</html>

表单验证

HTML5验证API

HTML5提供了一组用于表单验证的API，目前主流浏览器对HTML5提供的验证API支持越来越好。

  • 验证API的属性
属性名称描述
validity一个ValicityState对象，描述元素的验证状态
validity.customError如果元素设置了自定义错误，返回true，否则返回false
validity.patternMismatch如果元素的值不匹配所设置的正则表达式，返回true，否则返回false
validity.rangeOverflow如果元素的值高于所设置的最大值，返回true，否则返回false
validity.rangeUnderflow如果元素的值低于所设置的最小值，返回true，否则返回false
validity.stepMismatch如果元素的值不符合step属性的规则，返回true，否则返回false
validity.tooLong如果元素的值超过所设置的最大长度，返回true，否则返回false
validity.typeMismatch如果元素的值出现语法错误，返回true，否则返回false
validity.valueMissing如果元素设置了required属性且值为空，返回true，否则返回false
validity.valid如果元素的值不存在验证问题，返回true，否则返回false
  • 验证API的方法
方法描述
checkValidty()如果元素的值不存在验证问题，返回true，否则返回false
setCustomValidity(message)为元素添加一个自定义的错误信息；如果设置了自定义错误信息，则该元素被认为是无效的，并显示指定的错误

例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#">
        <!--  
            HTML表单组件元素的验证属性
            * required - 验证当前元素不能为空
            * pattern - 验证当前元素输入的内容是否与指定的正则表达式匹配
        -->
        <input type="text" id="username" required>
        <input type="submit" name="" id="">
    </form>
    <script>
        var form = document.forms;
        var username = document.getElementById('username');
        // 表单组件元素对应的对象提供了validity属性
        // *得到validityState对象 - 提供了一系列的验证属性
        console.log(username.validity);
        console.log(username.validity.valueMissing);


        username.addEventListener('blur', function() {
            // valueMissing属性
            // *作用 - 配合元素中required属性来使用
            // *结果
            //   *true - 表示当前元素内容为空(错误的)
            //   *false - 表示当前元素内容不为空(正确的)
            // console.log(username.validity.valueMissing);
            if (username.validity.valueMissing) {
                // console.log('请输入您的用户名');
                // setCustomValidity(message)方法
                // *作用 - 替换浏览器默认的错误提示信息
                // *注意 - 如果输入正确，必须将错误提示设置为空
                username.setCustomValidity('用户名不能为空');
            } else {
                username.setCustomValidity('');
            }
            // patternMismatch属性
            // *作用 - 配合元素中pattern属性来使用
            if (username.validity.patternMismatch) {
                username.setCustomValidity('用户名格式错误');
            } else {
                username.setCustomValidity('');
                // rangeOverflow - 配合元素中max属性来使用
                // rangeUnderflow - 配合元素中min属性来使用
                // stepMismatch - 配合元素中step属性来使用
                // toolong - 配合元素中maxLength属性来使用
                // tooShort - 配合元素中minLength属性来使用
                // typeMismatch - 配合<input type="url">等元素来使用
                // customError - 配合setCustomValidity()方法来使用
                // valid - 验证当前元素是否验证通过
                // *true - 表示当前元素验证通过
                // *false - 表示当前元素验证不通过
            }
        });
    </script>
</body>

</html>

表单提交

submit事件

提交表单时，会触发submit事件。

<form action="" method="post">
    <input type="text" name="data">
    <input type="submit" value="提交">
</form>
<script>
    var myform=document.forms[0];
    myform.addEventListener('submit',function(){
        alert('表单被提交。。。');
    });
</script>

表单还提供了submit()方法用于提交表单，使用该方法时允许表单内使用任一普通按钮即可(并非提交按钮)。

<form action="" method="post">
    <input type="text" name="data">
    <input id="btn" type="button" value="提交">
</form>
<script>
    var btn=document.getElementById('btn');
    btn.addEventListener('click',function(){
        var myform=document.forms[1];
        myform.submit();
    })
</script>

注意：使用submit()方法提交表单不会触发submit事件。

例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#">
        <input type="text" name="data">
        <input id="btn" type="button" value="提交">
    </form>
    <script>
        var btn = document.getElementById('btn');
        btn.addEventListener('click', function() {
            var myform = document.forms[0];
            myform.submit(); //提交表单
        })
    </script>
</body>

</html>
薯片
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS操作表单
晚先生的博客
10-04 268
操作表单 表单操作和DOM操作基本相同，表单也是DOM树的一部分。 假如有一个表单： ------- ------Submit 假如已经获取了一个节点：var input=document.getElementById('input') 获取输入的值：input.value; 更新文本框的值：input.value='更新的内容' 这种方法适用于text,password,
JS-操作表单
Mu木
11-26 391
获取和修改表单的值 用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。 <form action="" method="post"> <p> <span>用户名：</span> <input type="text" id="username"> </p> <!--多选框--> <p> <span>性
js基础（表单操作）
mimo_mimo的博客
03-11 415
js表单操作，MD5
JavaScript操作表单
TvTToT的博客
04-23 76
获得和设置表单的值 <form method="post" action="#"> <p> <span>用户名：</span><input type="text" id="username"> </p> <!--多选框的值就是定义好的value--> <p> <span>性别：</span> <inp..
JavaScript对表单的一些常用操作（表单验证）
编程小鹏的博客
05-22 693
1、JavaScript表单验证 HTML 表单验证可以通过 JavaScript 来完成。 以下实例代码用于判断表单字段(myName)值是否存在， 如果不存在，就弹出信息，阻止表单提交： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript表单验证</title> </head> <body&
了解JavaScript表单操作和表单域
10-16
JavaScript中的表单操作和表单域是Web开发中不可或缺的部分，它们允许用户在网页上输入数据并与服务器进行交互。在JavaScript中，我们可以使用多种方法来访问和操纵表单及其元素。 首先，表单的获取方式有多种。...
JavaScript操作表单实例讲解(上)
10-22
主要介绍了JavaScript操作表单实例讲解(上)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Javascript操作表单实例讲解（下）
10-22
主要介绍了Javascript操作表单实例讲解（下）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
理解JavaScript表单的基础知识
10-22
本文将深入探讨JavaScript表单的基础知识，包括表单元素、事件处理以及常见的表单操作。 1. HTMLFormElement接口 JavaScript中的表单元素由`HTMLFormElement`接口表示，它继承自`HTMLElement`。`HTMLFormElement`...
JS操作表单（验证）
qq_51389068的博客
09-09 235
JS操作表单（验证）
javascript基础、表单操作
qhzhen的博客
08-12 650
HTML表单是通过&lt;form/&gt;元素来定义的,它有以下特性 method –表示浏览器发挞GET请求或是发送POST请求 action – 表示表单所要提交到的地址URL enctype – 当向服务器端发送数据时，数据应该使用的编码方法，默认的是application/x-www-url-encoded,不过，如果上传文件，可以设置成multipart/form-data. ...
[JavaScript] 10.JS 表单操作
吴士龙
05-30 1699
表单操作无非是交互的必要性设计，冲浪的时候，早已是见多不惊。但真正到自己设计的时候呢，不同的观点，略有不同，但实质很简单，根据可用性设计原则，设计出优美的表单，还是很重要的。
JS中表单常用操作
不知跬步无至千里
07-18 327
&lt;form id="editForm" onsubmit="return false" &gt; &lt;tr&gt; &lt;td&gt;            &lt;input type="radio" name="radio1" value="1"&gt;是&lt;/input&gt;  
JavaScript（十）操作表单
木馏雕金
09-27 384
HTML表单的输入控件主要有以下几种： 文本框，对应的，用于输入文本； 口令框，对应的，用于输入口令； 单选框，对应的，用于选择一项； 复选框，对应的，用于选择多项； 下拉框，对应的，用于选择一项； 隐藏文本，对应的，用户不可见，但表单提交时会把隐藏文本发送到服务器。 一 获取值 如果我们获得了一个节点的引用，就可以直接调用value获得对应的用户输
JavaScript-表单对象
xmosang的博客
01-26 751
form标签本质上也是一个DOM对象 9.1、获取表单元素 表单的主要目的是提交信息 <form> 用户名：<input type="text" id="username"><br/> 性别：<input type="radio" name="sex" value="男" id="boy">男<input type="radio" name ="sex" value="女" id="girl">女 </form> &l
javascript表单处理相关的知识总结（一）
前端岚枫
04-14 973
在HTML中，表单是由元素来表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，它拥有HTML元素具有的默认属性，还有自己的属性和方法HTMLFormElement属性和方法 属性或方法 说明 acceptCharset 服务器能够处理的字符集 action 接受请求的URL elem
JavaScript 表单对象 | 看完不会请来捶我
lesileqin的博客
01-12 8088
文章目录一、访问表单与表单元素1、JavaScript访问表单2、JavaScript访问表单元素二、表单对象的属性、方法与事件1、属性2、方法3、事件三、表单元素1、文本框（1）文本框属性（2）文本框方法（3）例子1：验证表单内容是否为空（4）例子2：对文本框的文字加入字数限制2、按钮（1）按钮属性（2）按钮方法出去一下，虽然没人看，但我还要加一句：未完待续！！！！！（3）例子：获取表单元素的值...
JavaScript 表单
笔记
02-03 1979
在实际工作中，JavaScript 表单常常需要结合 JavaScript 验证 API，以确保用户提交的数据是正确的。例如，在表单提交前，我们可以通过 JavaScript 对用户名、邮箱、密码等字段进行验证，以确保数据的准确性。在实际工作中，JavaScript 表单的应用非常广泛，从简单的验证到复杂的处理，都可以用 JavaScript 实现。如果是，则显示错误消息，并防止表单提交。JavaScript 表单验证 API 可以使用在表单的验证中，来检查用户的输入是否符合预期的格式。
js操作表单总结
qq_28292349的博客
09-07 1872
一、表单、控件 &lt;form action="https://www.baidu.com" method="post" name="myForm" accept-charset="UTF-8" enctype="multipart/form-data"&gt; &lt;input type="text"&gt;
javascript 表单事件
最新发布
05-25
JavaScript 可以使用表单事件来处理表单的各种操作，例如提交表单、验证表单数据、清除表单等。 以下是一些常见的表单事件： 1. onsubmit：提交表单时触发的事件，可以用来验证表单数据的合法性，或者阻止表单的提交。 2. onreset：清除表单时触发的事件，可以用来清除表单数据或者重置表单状态。 3. onchange：当表单元素的值发生改变时触发的事件，可以用来实时获取表单数据并进行处理。 4. onfocus：当表单元素获得焦点时触发的事件，可以用来进行一些特殊的处理，比如高亮显示输入框。 5. onblur：当表单元素失去焦点时触发的事件，可以用来进行一些特殊的处理，比如验证输入框的内容是否符合要求。 使用这些事件可以方便地实现表单的交互效果和数据验证功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

薯片

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值