本身在作项目时,碰见表单提交两次的状况,贴上代码ui
<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.问题出现的缘由code
表单form默认存在一个提交的动做,本身再重写一个表单提交的动做,就会出现这样的问题,然而在这个需求里面,我须要使用到H5的默认表单验证
,个人提价按钮的type类型须要为submit
,若是更改成button,虽然没有出现两次提交,但验证则失效orm
2.问题的解决方案input
从新定义表单的submit方法,进行绑定,同时阻止默认提交 event.preventDefault()
it