JavaScript的表单操作

最新推荐文章于 2023-03-11 18:34:12 发布

薯片

最新推荐文章于 2023-03-11 18:34:12 发布

阅读量580

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_52102646/article/details/121427615

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

你好！这是我自己编辑的一些知识点。如果你想学习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>

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

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
评论
JavaScript的表单操作

你好！这是我自己编辑的一些知识点。如果你想学习JavaScript的有关知识, 可以仔细阅读这篇文章，了解一下关于JavaScript的基本语法知识。JavaScript的表单操作表单操作获取表单获取表单元素获取表单的组件元素表单操作文本框的操作文本内容的选择select事件获取选择的文本内容设置部分的文本内容操作剪切板下拉列表的操作HTMLSelectElement对象HTMLOptionElement对象表单验证HTML5验证API表单提交submit事件表单操作获取表单获取表单元素获取.
复制链接

扫一扫