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

2019独角兽企业重金招聘Python工程师标准>>>

之前的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)
		}
	}
}])

 

 

转载于:https://my.oschina.net/u/3060934/blog/881093