Js判断表单提交

最新推荐文章于 2025-05-16 10:30:00 发布

偷垃圾的猫

最新推荐文章于 2025-05-16 10:30:00 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Js 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/cchhzzyy/article/details/74454816

Js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了四种使用JavaScript进行表单提交验证的方法：1) 在form标签中使用onsubmit事件；2) 为submit按钮添加onclick事件；3) 通过button按钮触发submitForm方法；4) 直接为button按钮绑定submitForm事件。每种方法都包含一个确认提示对话框，只有当用户确认提交时，表单才会真正提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人第一次写博客，写的不好请见谅。吐舌头也不知道写的对不对，欢迎指正

第一种：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功，这种方法需要注意一下
     function validate(obj) {
        if (confirm("提交表单?")) {
           alert(obj.value);
           return true;
        } else {
           alert(obj.value);
           return false;
        }
     }
<body>
    <form onsubmit="return validate(document.getElementById('Text'));">
       <input type="text" id="Text"/>
       <input type="submit" value="submit"/>
    </form>
</body>

第二种方式：为submit按钮添加上onclick事件，为submit按钮添加上onclick事件,点击提交按钮表单直接提交
     function validate() {
        if (confirm("提交表单?")) {
           return true;
        } else {
           return false;
        }
     }
<body>
   <form>
       <input type="text"/>
       <input type="submit" value="submit" onsubmit="return validate()"/>
    </form>
</body>

第三种方式：通过button按钮来触发表单提交事件onclick="submitForm();"，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证。
     function validate() {
        if (confirm("提交表单?")) {
           return true;
        } else {
           return false;
        }
     }

     function submitForm() {
        if (validate()) {
           document.getElementById("myForm").submit();
        }
     }
<body>
    <form id="myForm">
       <input type="text"/>
       <input type="button" value="submitBtn" onclick="submitForm();"/>

    </form>
</body>