JavaScript 提交表单的三种绑定（动态绑定，行内绑定，监听绑定）

亭wan

已于 2025-04-09 21:01:11 修改

阅读量2.3k

点赞数 43

CC 4.0 BY-SA版权

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

于 2024-12-19 23:23:27 首次发布

本文链接：https://blog.csdn.net/2301_80895136/article/details/144594725

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

提交表单的三种绑定

1.动态绑定：通过代码将事件处理函数与特定的事件关联起来的过程

2.行内绑定：在 HTML 元素的属性中直接嵌入 JavaScript 代码

3.监听绑定：通过监听器与特定的事件关联起来的过程

提交表单的三种绑定

在讲解表单的三种绑定之前，我们先创建一个表单，代码如下：

check函数内实现的效果为：

当文本框内不输入时，弹出弹窗显示“请输入年龄”，表单数据不提交

当输入年龄在[0,120]时，表单数据提交到1.html内

当输入年龄不在[0,120]时，弹出弹窗显示“年龄超出范围”，重置f1，表单数据不提交

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三种绑定</title>
</head>

<body>
    <form action="1.html" name="f1" id="f1" method="get">
        年龄:<input type="text" name="age">
        <input type="submit" value="提交" name="sub">
        <input type="reset" value="重置">
    </form>
    <script>
        function check() {
            var text = document.f1.age.value;
            if (text == ""){ //当文本框不输入时，text为空字符串，返回undefined，表单数据被提交，故需要判断text为空字符串的情况
                alert("请输入年龄");
                return false; 
            }
            else if (text >= 0 && text <= 120)
                return true;
            else {
                alert("年龄超出范围");
                document.f1.reset(); //reset函数重置表单f1
                return false;
            }
        }
    </script>
</body>

</html>

1.动态绑定：通过代码将事件处理函数与特定的事件关联起来的过程

document.表单name属性名.input元素name属性名.事件属性=函数名

注：函数名后不可加（），这里仅需将函数check赋值给onclick，用了check()，则当页面加载时check函数立即执行

document.f1.sub.onclick=check;

正确代码展示：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态绑定</title>
</head>

<body>
    <form action="1.html" name="f1" method="get">
        年龄:<input type="text" name="age">
        <input type="submit" value="提交" name="sub">
        <input type="reset" value="重置">
    </form>
    <script>
        function check() {
            var text = document.f1.age.value;
            if (text == ""){ //当文本框不输入时，text为空字符串，返回undefined，表单数据被提交，故需要判断text为空字符串的情况
                alert("请输入年龄");
                return false; 
            }
            else if (text >= 0 && text <= 120) //当输入年龄在[0,120]时，表单数据提交
                return true;
            else {
                alert("年龄超出范围");
                document.f1.reset(); //reset函数重置表单f1
                return false;
            }
        }
        document.f1.sub.onclick=check;
    </script>
</body>

</html>

当文本框内不输入时，弹出弹窗显示“请输入年龄”，表单数据不提交

当输入年龄在[0,120]时，表单数据提交到1.html内

当输入年龄不在[0,120]时，弹出弹窗显示“年龄超出范围”，重置表单f1，表单数据不提交

错误代码展示：

此时每次刷新页面，check会立即执行，不符合要求

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态绑定</title>
</head>

<body>
    <form action="1.html" name="f1" method="get">
        年龄:<input type="text" name="age">
        <input type="submit" value="提交" name="sub">
        <input type="reset" value="重置">
    </form>
    <script>
        function check() {
            console.log("错误动态绑定");
            var text = document.f1.age.value;
            if (text == ""){ //当文本框不输入时，text为空字符串，返回undefined，表单数据被提交，故需要判断text为空字符串的情况
                alert("请输入年龄");
                return false; 
            }
            else if (text >= 0 && text <= 120) //当输入年龄在[0,120]时，表单数据提交
                return true;
            else {
                alert("年龄超出范围");
                document.f1.reset(); //reset函数重置表单f1
                return false;
            }
        }
        document.f1.sub.onclick=check();
    </script>
</body>

</html>

2.行内绑定：在 HTML 元素的属性中直接嵌入 JavaScript 代码

事件属性=" return ture/false/函数()"

<input type="submit" value="提交" name="sub" onclick="return check()">

完整代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内绑定</title>
</head>

<body>
    <form action="1.html" name="f1" method="get">
        年龄:<input type="text" name="age">
        <input type="submit" value="提交" name="sub" onclick="return check()">
        <input type="reset" value="重置">
    </form>
    <script>
        function check() {
            var text = document.f1.age.value;
            if (text == ""){ //当文本框不输入时，text为空字符串，返回undefined，表单数据被提交，故需要判断text为空字符串的情况
                alert("请输入年龄");
                return false; 
            }
            else if (text >= 0 && text <= 120) //当输入年龄在[0,120]时，表单数据提交
                return true;
            else {
                alert("年龄超出范围");
                document.f1.reset(); //reset函数重置表单f1
                return false;
            }
        }
    </script>
</body>

</html>

此处实现效果与动态绑定一样，实现效果图省略

3.监听绑定：通过监听器与特定的事件关联起来的过程

document.表单name属性名.input元素name属性名.addEventListener（'事件类型',函数名）

注：1、函数名后不可加（），这里仅需将函数check赋值给onclick，用了check()，则当页面加载时check函数立即执行

2、addEventListener方法，不会自动地阻止默认行为（如表单提交），需要preventDefault()函数阻止表单提交

document.f1.sub.addEventListener('click', check);

完整代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听绑定</title>
</head>

<body>
    <form action="1.html" name="f1" method="get">
        年龄:<input type="text" name="age">
        <input type="submit" value="提交" name="sub">
        <input type="reset" value="重置">
    </form>
    <script>
        function check(e) {
            var text = document.f1.age.value;
            if (text == ""){ //当文本框不输入时，text为空字符串，返回undefined，表单数据被提交，故需要判断text为空字符串的情况
                alert("请输入年龄");
                e.preventDefault(); 
            }
            else if (text >= 0 && text <= 120) //当输入年龄在[0,120]时，表单数据提交
                return true;
            else {
                alert("年龄超出范围");
                document.f1.reset(); //reset函数重置表单f1
                e.preventDefault();
            }
        }
        document.f1.sub.addEventListener('click', check);
        //注：addEventListener方法，不会自动地阻止默认行为（如表单提交）
    </script>
</body>

</html>

此处实现效果与动态绑定一样，实现效果图省略

如果有朋友想学习表单元素可以看看这篇文章

JavaScript 表单元素属性 value、defaultValue、readOnly、disabled、checked、selected