表單出現提交兩次的問題的解決

表單出現提交兩次的問題的解決

---

本身在作項目時，碰見表單提交兩次的狀況，貼上代碼

<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()