android表单失去焦点校验,Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)...

AngularJS提供了表单验证，但是验证的过程交互体验很不好，比如重设密码，重复密码的时候一键入就会提示密码不正确，现整理了两种方法，仅供借鉴。

一，点击提交验证

当用户试图提交表单时，你可以在作用域中捕获到一个submitted值，然后对表单内容进行验证并显示错误信息。

JS代码

$scope.submitted = false;

$scope.resetPwd = function(){

console.log(666);

if($scope.reset_pwd.$valid && $scope.mycompwd == $scope.resetmycompwd){

console.log('重置成功,进行其他操作');

}else{

$scope.reset_pwd.submitted = true;

}

}

亲测可用。

第二种失去焦点验证

JS代码

app.directive('ngFocus',[function(){

var focusClass = 'ng-focused';

return{

restrict:'AE',

require:'ngModel',

link:function(scope,element,attrs,ctrl){

ctrl.$focused = false;

element.bind('focus',function(e){

element.addClass(focusClass);

scope.$apply(function(){

ctrl.$focused = true;

});

element.bind('blur',function(e){

element.removeClass(focusClass);

scope.$apply(function(){

ctrl.$focused = false;

});

});

})

}

};

}]);

注意HTML标红的地方。正是区分两种方法的关键。

以上所述是小编给大家介绍的Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！