js表单提交的三种方式

最新推荐文章于 2025-06-11 21:11:49 发布

原创最新推荐文章于 2025-06-11 21:11:49 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#提交表单 #javascript

JS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了三种不同的表单提交方法：使用button按钮结合submit()函数、submit按钮结合onclick方法以及submit按钮结合onsubmit()方法。每种方法都有其特定的调用方式及返回值特性，文章通过具体代码示例展示了如何验证表单输入并在验证通过后提交。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交的三种方式</title>
<script type="text/javascript">
   //button按钮结合submit()提交表单
    function checkForm(){
        if(document.form1.in1.value==""){
            alert("用户名不能为空。。。");
        }else if(document.form1.in2.value.length == 0){
            alert("密码不能为空。。。");
        }else{
             alert("提交成功！");
             form1.submit();//提交表单
        }
   }


   //submit按钮结合onclick方法
    function checkForm2(){
         if(document.form1.in1.value==""){
            alert("用户名不能为空。。。");
            return false;
        }else if(document.form1.in2.value.length == 0){
            alert("密码不能为空。。。");
            return false;
        }else{
             alert("提交成功！");
             return  true;
        }
   }
   //区别：调用方式以及具有返回值

   //submit按钮结合onsubmit()方法
   function checkForm3(){
         if(document.form1.in1.value==""){
            alert("用户名不能为空。。。");
            return false;
        }else if(document.form1.in2.value.length == 0){
            alert("密码不能为空。。。");
            return false;
        }else{
             alert("提交成功！");
             return  true;
        }
   }
   //区别：调用的方式
</script>
</head>
<body>
 <form action="#" name="form1" method="post" onsubmit="return checkForm3()">
     用户名：<input type="text" name="in1"/><br>
     密&emsp;码：<input type="password" name="in2"/><br>
 <!-- <input type="button" value="提交" onclick="checkForm()"/>   --> 
 <!-- <input type="submit" value="提交" onclick="return checkForm2()"/>   --> 
 <input type="submit" value="提交"/>   
 </form>
</body>
</html>