FormData表单数据的基本信息

最新推荐文章于 2023-05-08 18:11:14 发布

菜汪在路上

最新推荐文章于 2023-05-08 18:11:14 发布

阅读量520

点赞数

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

本文链接：https://blog.csdn.net/qx020814/article/details/127243923

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

学到这里的时候，就已经准备打算开始前后端数据交互、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="t1.html" method="post" id="formId">
    <div>
        <label for="loginld">登录账号</label>
        <input type="text" id="loginld" name="loginld"/>
    </div>
    <div>
        <label for="loginldPWD">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
        <input type="password" id="loginldPWD" name="loginldPWD"/>
    </div>
    <div>
        <input type="submit" id="loginldbtn" name="loginldbtn" value="登录" onclick="return batSubmit()"/>
    </div>
</form>
</body>
<script>
    function batSubmit() {
        var frm = document.getElementById("formId");
        var formData = new FormData(frm);
        formData.append("username", "张小二");
        console.log(formData.get("username"));
        formData.set("username", "张大三");
        console.log(formData.get("username"));
        for (var key of formData.keys()) {
            console.log("键名：" + key)
        }
        for (var val of formData.values()) {
            console.log("值：" + val)
        }
        for (var pair of formData) {
            console.log(pair[0] + " " + pair[1]);
        }
        return false;
    }
</script>
</html>

在网页中很多时候都是使用表格进行提交的。在js中也可以操作数据，当让要使用鼠标点击事件、

在填写的时候可以使用表格的验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="t2.html" method="post" id="regUser">
    <div>
        <label for="userName">用&nbsp;&nbsp;户&nbsp;&nbsp;名</label>
        <input type="text" id="userName" name="userName" required/>
    </div>
    <div>
        <label for="email">电子邮件</label>
        <input type="email" id="email" name="email" required/>
    </div>
    <div>
        <input type="submit" value="注册" onclick="check()"/>
    </div>
    <ul id="errorMsg" style="color: red"></ul>
</form>
</body>
<script>
    function check() {
        var form = document.querySelector("#regUser");
        var errorMsg = document.querySelector("#errorMsg");
        var userName = document.querySelector("#userName");
        var email = document.querySelector("#email");
        errorMsg.innerHTML = "";
        if (form.checkValidity()) {
            alert("全部通过")
        } else {
            if (userName.validity.valueMissing) {
                userName.setCustomValidity("用户名不能为空");
            } else {
                userName.setCustomValidity("");
            }
            if (email.validity.valueMissing) {
                email.setCustomValidity("电子邮箱不能为空");
            } else if (email.validity.typeMismatch) {
                email.setCustomValidity("电子邮箱格式不正确");
            } else {
                email.setCustomValidity("");
            }
            errorMsg.innerHTML += "<li>" + userName.validationMessage + "</li>";
            errorMsg.innerHTML += "<li>" + email.validationMessage + "</li>";
        }
    }
</script>
</html>