原创 

angularjs验证学习,问题及思考篇(angularjs validation)

分类:    1383人阅读    IT小君  2016-03-05 12:11
1、angularjs中提供了基本的验证, 验证在输入改变时触发(不是blur时),
验证完成后会给被验证标签添加样式(如:.ng-invalid),
验证时需要一个表单标签form包裹,但不是必须的

举个例子:

    

		<!DOCTYPE html>
		<html>
		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
		<body ng-app="">
		<p>Try writing in the input field:</p>
		<form name="myForm">
		<input name="myInput" ng-model="myInput"  ng-maxlength="2">
		<span ng-show='myForm.myInput.$invalid' >最长2位。</span>
		</form>
		</body>
		</html>


以上验证长度不能超过2位,更多示例,请看这里:http://www.w3schools.com/angular/angular_validation.asp

2、问题
    a、不想使用Form标签,你可以使用ng-form,例如可将上述代码的form片段修改如下(div替换form):
         

	<div ng-form="myForm">
	<input name="myInput" ng-model="myInput"  ng-maxlength="2">
	<span ng-show='myForm.myInput.$invalid' >最长2位。</span>
	</div>

    b、如何修改验证在blur事件触发?

        答案一:使用angularjs内部的支持,在标签中加上属性 ng-model-options="{ updateOn: 'blur' }" 详见...

                    相关信息:
                         

            Angular 1.3 now has ng-model-options, and you can set the option to { 'updateOn': 'blur'} for example, and you can even debounce, when the use is either typing too             fast, or you want to save a few expensive DOM operations (like a model writing to multiple DOM places and you don't want a $digest cycle happening on every key                 down)

https://docs.angularjs.org/guide/forms#custom-triggers and https://docs.angularjs.org/guide/forms#non-immediate-debounced-model-updates

By default, any change to the content will trigger a model update and form validation. You can override this behavior using the ngModelOptions directive to bind only to specified list of events. I.e. ng-model-options="{ updateOn: 'blur' }" will update and validate only after the control loses focus. You can set several events using a space delimited list. I.e. ng-model-options="{ updateOn: 'mousedown blur' }"


       答案二:是指令,直接上代码:
        
     ITClubApp.directive('ngModel', function() {
		return {
			require: 'ngModel',
			link: function(scope, elem, attr, ngModel) {
				elem.on('blur', function() {
					ngModel.$dirty = true;
					scope.$apply();
				});

				ngModel.$viewChangeListeners.push(function() {
					ngModel.$dirty = false;
				});

				scope.$on('$destroy', function() {
					elem.off('blur');
				});
			}
		}
	});

以上代码不会有任何副作用,使用时验证使用方式不用任何修改,这段代码相当于重写了原有的触发时机代码。

将itclubapp改成你自己的application就可以用了。

3、在controller中获取验证结果
原理:通过提交时间将表单对象传递过去获取$vaild变量,看代码如下:

	<div class="form-group">
		<button type="button" class=" col-md-12 btn btn-success" ng-click="Registerfun(myForm)">注册</button>
	</div>
controller代码:


	$scope.Registerfun = function(form){
		if(form.$valid)
		{
			dosomething...
		}	
	}


讨论请留言


点击广告,支持我们为你提供更好的服务

html5 canvas彩色碎片组合球形旋转动画特效

html5图标下拉搜索框自动匹配代码

响应式咖啡饮品宣传网站模板

有机水果蔬菜HTML5网站模板

css鼠标跟随文字模糊特效

现代时尚家具公司网站模板

jQuery右端悬浮带返回顶部特效

HTML5现代家居装潢公司网站模板

HTML5数字产品服务公司网站模板

html5 canvas进度条圆环图表统计动画特效

响应式太阳能能源公司网站模板

中小型创意设计服务公司网站模板

js+css3抽奖转盘旋转点餐代码

网页设计开发公司网站模板

html5 svg夜空中星星流星动画场景特效

HTML5 Canvas竖直流动线条背景动画特效

css+js实现的颜色渐变数字时钟动画特效

canvas炫酷鼠标移动文字粒子特效

小众时尚单品在线电子商务网站模板

响应式时尚单品在线商城网站模板

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务