表单出现提交两次的问题的解决

表单出现提交两次的问题的解决

---

自己在做项目时，遇见表单提交两次的情况，贴上代码

  <form class="form-horizontal m-t pull-left" id="signupForm" ng-submit="signupForm($event)">
                    <div class="form-group">
                        <label for="telephone" class="col-sm-3 control-label">手机号码</label>
                        <div class="col-sm-8">
                            <input ng-model="user.telephone" id="telephone" name="telephone" class="form-control" type="text" placeholder="请输入手机号" required autofocus  pattern="^[1][358][0-9]{9}$">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="setPass" class="col-sm-3 control-label">设置密码</label>
                        <div class="col-sm-8">
                            <input ng-model="user.password" id="setPass" name="setPass" class="form-control" type="password" placeholder="请输入6到12位字符" required pattern="\w{6,12}">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-8 col-sm-offset-3">
                            <button class="btn btn-success" type="submit" id="signup" >注册</button>
                        </div>
                    </div>
                </form>

1.问题出现的原因

表单form默认存在一个提交的动作，自己再重写一个表单提交的动作，就会出现这样的问题，然而在这个需求里面，我需要使用到H5的默认表单验证，我的提价按钮的type类型需要为submit，如果更改为button，虽然没有出现两次提交，但验证则失效

2.问题的解决方案

重新定义表单的submit方法，进行绑定，同时阻止默认提交 event.preventDefault()

转载于:https://www.cnblogs.com/king-ying/p/6722215.html