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)
		}
	}
}])