使用FormData对表单（文本框、下拉框、密码框、单选框、多选框等）数据进行获取，简单高效

最新推荐文章于 2024-04-24 13:23:36 发布

wang_9909

最新推荐文章于 2024-04-24 13:23:36 发布

阅读量1.6k

点赞数

分类专栏： html 个人网页 JavaScript 文章标签： es6 javascript forms 前端 html

本文链接：https://blog.csdn.net/wang_9909/article/details/119757481

版权

JavaScript 同时被 3 个专栏收录

45 篇文章 0 订阅

订阅专栏

html

34 篇文章 1 订阅

订阅专栏

个人网页

20 篇文章 0 订阅

订阅专栏

当我们需要对表单数据进行上送时，经常会使用一些dom操作获取每个input的内容。例如：

   
<form name="register">
    <p>
        爱好：<input type="checkbox" name="fav[]" value="读书"> 读书、
        <input type="checkbox" name="fav[]" value="音乐">音乐、
        <input type="checkbox" name="fav[]" value="体育">体育
    </p>
    <p>
        <!--普通按钮-->
        <input type="button" name="commit" value="立即注册">
    </p>
</form>

为了获取多选框的值，我们就需要对这个dom进行循环操作

var favObjs = document.register['fav'],
    btn = document.querySelector('input[type="button"]'),
    favs = [];
btn.onclick = function () {
    favObjs.forEach(function (item, index) {
        if (item.checked) {
            favs.push(item.value);
        }
    });
    favs = Array.from(new Set(favs));//Set是一种去重的方法
    console.log(favs)
}

如此就有点麻烦了。

为了快速且简便的对表单信息进行操作，ES6引入了一个FormData对象。

<!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>
    <h4>
        新用户注册
    </h4>
    <form name="register">
        <p>
            账号：<input type="text" name="uname" value="" />
        </p>
        <p>
            密码：<input type="password" name="usrpwd" value="" />
        </p>
        <p>
            性别：<input type="radio" name="gender" value="男" /> 男、
            <input type="radio" name="gender" value="女" />女
        </p>
        <p>
            爱好：<input type="checkbox" name="fav[]" value="读书"> 读书、
            <input type="checkbox" name="fav[]" value="音乐">音乐、
            <input type="checkbox" name="fav[]" value="体育">体育
        </p>
        <p>
            <!--普通按钮-->
            <input type="button" name="commit" value="立即注册">
        </p>
    </form>

    <script>
        // 如果使用FormData 往往不需要使用submit按钮，普通按钮点击验证即可
        var button = document.register.commit;

        button.onclick = function () {
            // 获取表单输入控件的值，包含了文本框、单选框、多选框，为了方便 可以使用FormData来操作
            document.register; // dom对象 是dom结构的对象 不是普通的数据对象
            // 使用FormData将表单dom对象转成表单数据对象

            /************ 重点**************/
             fd = new FormData(document.register);  //为了F12能动态演示，因此将fd定义为全局变量
            console.dir(fd); // {}

            // 它不直接暴露数据，而是提供接口来获取
            var uname = fd.get('uname'),
                usrpwd = fd.get('usrpwd'),
                gender = fd.get('gender'),
                favs = fd.getAll('fav[]');
            // console.log(uname, usrpwd, gender, favs);

            /************ 重点**************/

            var msg = '';
            if (/^\s*$/.test(uname)) { //  '' '  '
                msg += '账号未填写\n';
            }

            if (!/^\w{8,15}$/.test(usrpwd)) {
                msg += '密码长度不符合要求\n'
            }

            if (!gender) {
                msg += '性别未选择\n'
            }

            if (favs.length == 0) {
                msg += '爱好未选择'
            }

            if (msg) {
                alert(msg);
                return false;
            } else {
                // location.href = 'http://localhost';
            }
        }
    </script>
</body>

</html>