阻止表单提交

在学习get，post时，我添加了一个阻止表单提交的代码

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <form id="form" action="/student" method="post">
        <div>
            <div style="margin:10px 0">加法计算器</div>
            <div style="margin:10px 0">加数1:<input style="margin:0 5px" type="text" name="num1" v-model="user.num1"></div>
            <div style="margin:10px 0">加数2:<input style="margin:0 5px" type="text" name="num2" v-model="user.num2"></div>
            <button  type="submit" @click="sub">提交</button>
        </div>
<!--        <input type="submit" value="提交">-->
    </form>
     <script>
         const {reactive}=Vue;
         const user=reactive({
             num1:'',
             num2:''
         })
         function sub() {
           if (user.num1.trim().length==0||user.num2.trim().length==0){
               alert("不能为空值！");
               return false;
           }
         }
         let form={
             setup(){
                 return{user,sub}
             }
         }
         Vue.createApp(form).mount('#form');
     </script>
</body>
</html>

为什么弹出警告后确定表单还是跳转到了/student

该筱该 2022-03-13

源自：Web与Servlet基础 2-16 Get与Post请求方式

收起

1回答

好帮手慕阿园回答被采纳获得+3积分 2022-03-13 16:51:42

同学你好，同学可以在form表单中添加onsubmit="return sub()"，并将button中的@click="sub"去掉

<form id="form" action="/student" method="post" onsubmit="return sub()">
    <div>
        <div style="margin:10px 0">加法计算器</div>
        <div style="margin:10px 0">加数1:<input style="margin:0 5px" type="text" name="num1" v-model="user.num1"></div>
        <div style="margin:10px 0">加数2:<input style="margin:0 5px" type="text" name="num2" v-model="user.num2"></div>
        <button type="submit" >提交</button>
    </div>
</form>

祝学习愉快~

收起回答

该筱该提问者 #1

老师能讲解一下大概的原因吗，问题解决了但不太明白

2022-03-13 16:59:20
好帮手慕阿园回复提问者该筱该 #2

同学你好，阻止表单提交时需要在form表单中绑定事件，而不是在button中，在button中只会触发该事件，但并不会阻止整个表单提交，所以这里建议同学在form表单中绑定事件
祝学习愉快~

2022-03-13 18:30:07