记form表单自动提交的两大坑

1、按钮

<form action="/" method="post">
    名：<input type="text"/>
    字：<input type="text">
    <button class="beautiful-button">提交</button>
   <button class="beautiful-button">取消</button>
</form>

        看似这个表单没有其他问题，实际上，不管名的输入框还是字的输入框有焦点，按回车、点击提交按钮、取消按钮均会提交表单。

        为什么会这样呢？

        实际上是由于button标签没有设置type属性，在form表单内默认type是submit，且回车会触发submit事件，默认触发从上到下第一个submit按钮的点击事件，然后提交。

        解决方式：

                1、第一个submit按钮可以设置οnclick="return false;",或者在需要处理的事件后面加上return false;

<button class="beautiful-button" onclick="return false;">提交</button>

                2、将普通按钮的type设置为button，type="button"

<button class="beautiful-button" type="button">提交</button>
<button class="beautiful-button" type="button">取消</button>

                3、设置form表单的οnsubmit="return false;"（通用，但不建议，如果全部使用ajax提交或者formdata提交可这样设置）

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

               

2、文本框

        有且仅有一个文本框时

    <form action="/" method="post" >
        名：<input type="text"/>
        <button class="beautiful-button" type="button">提交</button>
       <button class="beautiful-button" type="button">取消</button>
    </form>

             这种情况不管按钮的type属性设置的是button还是submit，按回车时都将自动提交表单。

        解决方案：

                1、设置form表单的οnsubmit="return false;"（通用，但不建议，如果全部使用ajax提交或者formdata提交可这样设置）

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

                2、将其中一个按钮的type设置为submit或者不设置。然后οnclick="return false;"

<button class="beautiful-button" onclick="return false">提交</button>

                3、加入另一个input框，使form表单内的输入框数量超过一个就不会自动提交，如果影响的话，将display属性设置为none即可，不能使用隐藏域，隐藏域不会被视为有效输入框

 名：<input type="text"/>
<input type="text" style="display:none"/>

如果有错误还请评论区指出哦~我们一起进步！