之前的AngularJs表单验证都是在HTML页面上直接验证,然后提示。类似于下面
1 |
|
这样的验证提示一般在输入后直接提示,但是这种方法可能不太适用于移动端的表单提示。
用户体验会不太好,一般是点击确定按钮的时候 再进行统一提示。
第一步:给一个表单元素form下增加一个submit按钮。按钮添加一个自定义指令,我的是form-submit
1 | <div class="row clearfix"> |
第二步:编写自定义指令
我们最主要的目的是获取到form这个对象。
我们可以通过这个指令的scope获取到这个form对象,我的是myForm(自己定义)
之前我们验证的时候是通过myForm[‘输入框name’].$error来判断这个输入框输入正确性。
那么在指令中,我们同样可以通过scope.myForm[‘输入框name’]
1 | .directive('formSubmit', ['$rootScope', 'Ajax', '$state', 'showTipModal', function($rootScope, Ajax, $state,showTipModal) { |
那么现在,当我们点击form提交按钮的时候,就会开始验证,如果验证不通过,就是提示。
我觉得这样写可能会比较好看,不然又扯到jquery表单验证上面就不好看了
下面是我自定义的服务,提示框显示
1 | //提示框 |