Html：阻止表单数据提交的几种方式

最新推荐文章于 2023-08-26 14:44:49 发布

netyeaxi

最新推荐文章于 2023-08-26 14:44:49 发布

阅读量6.5k

点赞数 1

文章标签： form submit

Html 专栏收录该内容

1 篇文章

订阅专栏

博客介绍了HTML禁止表单提交的方法。包括写<input>提交按钮时将type类型改为button并添加点击事件，避免使用默认提交的<button>按钮；还可在form中添加onsubmit属性使返回值为false，或写提交方法做验证，不符合条件则阻止提交，也介绍了阻止表单提交的4种常用方式。

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

原文：HTML禁止表单提交方法 https://blog.youkuaiyun.com/qq_43529877/article/details/84960470

有时在点击提交按钮时不希望提交form表单，所以在写提交按钮时应该注意以下几点：

<form name="form1" method="post" action="" >
    <table width="50%" border="0" cellspacing="1" cellpadding="0">
        <tr>
            <td width="20%">用户名：</td>
            <td width="50%">
                <label>
                 <input type="text" required="required" placeholder="请输入用户名" id="username" v-model="username" />
                </label>
            </td>
            <td width="30%"><div id="username_error"></div></td>
        </tr>

        <tr>
            <td colspan="3">
                <label>
                 <input type="button" @click="register" name="button" id="button" value="提交">
                 <input type="reset" name="button2" id="button2" value="重置">
                </label>
            </td>
        </tr>
    </table>
</form>

一、在写<input> 提交按钮时type类型不要再写成submit改为button类型，然后为按钮添加一个点击事件就可以了，如上述的按钮写法，不要在form中写onsubmit属性。

 <input type="button" @click="register" name="button" id="button" value="提交">

二、注意不要再表单中写这种类型的<button>提交</button>按钮默认也是提交整个表单。
三、可以再form中添加onsubmit属性，让提交的返回值为false，这样就能控制点击提交按钮提交表单了
如：

<form  method="post" action=""  onsubmit="return false;">

或在form中写一个提交的方法，让方法做一些验证，不符合条件阻止提交，如：

<form  method="post" action=""  onsubmit="return check()；">
--------------------------------------------------------------
// 验证表单
function check(){
    // 验证表单数据是否符合条件，不符合返回false禁止提交
    return false;            
}

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

原文：阻止表单数据提交的几种方式 http://www.php.cn/blog/detail/3463.html

阻止表单提交的4种常用方式

方式1：给form标签的添加表单提交事件οnsubmit="return false;"

<form οnsubmit="return change()" id="myForm" method="POST" class="form-horizontal" role="form">
</form>
<script>
function change() {
    
    //动作：阻止表单数据提交
    return false;
}
</script>

方式2：给form表单中的按钮添加单击事件οnclick="return false;"

<form οnsubmit="" id="myForm" method="POST" class="form-horizontal" role="form">
    <button class="btn btn-primary" type="submit" οnclick="return change();">提交配置</button>
</form>
<script>
function change() {
    
    //动作：阻止表单数据提交
    return false;
}
</script>

方式3：也是给form标签添加表单提交事件，只是添加的方式不同而已

<form id="myForm" method="POST" class="form-horizontal" role="form">
</form>
<script>
$('#myForm').submit(function (event) {
        //动作：阻止表单的默认行为
        event.preventDefault();
        
        //这也是可以的，虽然也是绑定表单提交事件，
        // 但相比于οnsubmit="return false;"，这个直接在事件处理程序（当前函数）中返回false就行了
        // return false;
    })
</script>

方式4：最后这个厉害了，也是最简单的，直接规定button的类型为button就行了

<form οnsubmit="return change()" id="myForm" method="POST" class="form-horizontal" role="form">    
    <button class="btn btn-primary" type="button">提交配置</button>
</form>