AngularJs表单验证【点击提交按钮时再提示】

以前的AngularJs表单验证都是在HTML页面上直接验证，而后提示。相似于下面

<div class="row clearfix">
	<div class="icon text">
		物联卡号
	</div>
	<div class="input text">
		<input type="text" name="card_number" ng-model="formData.card_number" placeholder="卡号后面的字母不要填" required />
		<div class="valide_tip" ng-messages="myForm.card_number.$error" ng-if="myForm.card_number.$touched&&myForm.card_number.$invalid">
			<p ng-message="required">必填项</p>
		</div>
	</div>
</div>

这样的验证提示通常在输入后直接提示，可是这种方法可能不太适用于移动端的表单提示。

用户体验会不太好，通常是点击肯定按钮的时候 再进行统一提示。

第一步：给一个表单元素form下增长一个submit按钮。按钮添加一个自定义指令，个人是form-submit

<div class="row clearfix">
	<div class="icon text"></div>
	<input type="submit" class="input button" ng-disabled="myForm.$invalid" form-submit="approve" value="肯定" submit-type="upload" >
</div>

第二步：编写自定义指令

咱们最主要的目的是获取到form这个对象。

咱们能够经过这个指令的scope获取到这个form对象，个人是myForm（本身定义）

<form action="javascript:;" novalidate  name="myForm"></form>

以前咱们验证的时候是经过myForm['输入框name'].$error来判断这个输入框输入正确性。

那么在指令中，咱们一样能够经过scope.myForm['输入框name']

 

.directive('formSubmit', ['$rootScope', 'Ajax', '$state', 'showTipModal', function($rootScope, Ajax, $state, showTipModal) {
	return {
		link: function(scope, ele, attr, ctrl) {
			ele.on("click", function() {
                var form=scope.myForm;
                if(form.username.$error.required){
                    showTipModal("用户名不能为空") 
                    return；
                }
                else if(form.username.$error.pattern){
                    showTipModal("用户名非法") //showTipModal是我本身定义的一个提示框方法
                    return；
                }
                
                
                //验证经过，经过Ajax提交表单
                
			})
		}
	
	}
}])

那么如今，当咱们点击form提交按钮的时候，就会开始验证，若是验证不经过，就是提示。

我以为这样写可能会比较好看，否则又扯到jquery表单验证上面就很差看了

下面是我自定义的服务，提示框显示

//提示框
.factory('showTipModal', ['$rootScope', '$timeout',function($rootScope, $timeout) {
	return function(param) {
		var tip = param.tip,
			autoClose = param.autoClose == false ? false : true,
			tipModal = angular.getDom("#tipModal"),
			href = param.href;

		tipModal._find(".body").html(tip)//_find是我自定义添加上的查找节点方法，由于angular自定的很差用
		tipModal.modalShow()

		tipModal._find(".confirm").attr("tipModalConfirm", "center." + href)

		//提示框操做

		if(autoClose) {
			$timeout(function() {
				tipModal.modalHide()
			}, 3000)
		}
	}
}])