(译) 在AngularJS中使用的表单验证功能【转】
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用。 在AngularJS中,有许多用于验证的指令。我们将先学习几个最流行的内置指令,然后再创建一个自定义验证规则的指令。 AngularJS可以让我们轻松的处理客户端验证。虽然我们不能仅靠客户端验证来保证我们Web应用的安全性,但他们提供了良好用户体验。 我们首先必须确保form上标签有一个name属性,像上面的例子一样。 我们可以进行一些基本的验证,例如最小长度,最大长度,等等,这些都是HTML5自带的属性验证功能。 Tips:通常需要在form标签中加上 下面来看看我们可以在input中设置哪些验证: 必填验证是否已输入文字,只需在标签上加上required: 最小长度验证至少输入{number}个字符,使用指令ng-minlength=“{number}”: 最大长度验证至多输入{number}个字符,使用指令ng-maxlength=“{number}”: 正则匹配确保输入匹配一个正则表达式,使用指令 验证输入是一个Email,设置input的type属性为email: 数字验证输入是一个数字,设置input的type属性为number: Url验证输入是一个URL,设置input的type属性为url: 自定义验证AngularJS可以很容易的使用指令来添加自定义验证。例如,我们要验证我们的用户名是可用的(在数据库中不重复)。要做到这一点,我们将实现一个指令,它在输入字符变化时触发一个Ajax请求: var app = angular.module('validationExample',[]); <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码"> <img src="https://www.52php.cn/res/2019/03-06/23/51e409b11aa51c150090697429a953ed.gif" alt="复制代码"> 验证表单状态AngularJS将DOM验证的结果保存在$scope对象中。这使我们能够实时做出一些处理。提供给我们的属性有: 请注意,这是这个属性的格式: formName.inputFieldName.property
未修改过的表单表示用户是否修改了表单。如果为ture,表示没有修改过: formName.inputFieldName.$pristine;
修改的表单当且用户是否已经修改过表单: formName.inputFieldName.$dirty
经过验证的表单表示否通过验证: formName.inputFieldName.$valid
未通过验证的表单表示否通过验证。如果表单当前没有通过验证,他将为true: formName.inputFieldName.$invalid
最后两个属性在用于DOM元素的显示或隐藏时是特别有用的。当然,如果想要设置特定的class时,他们也是非常有用的。 错误另一个有用的属性是AngularJS提供的$error对象。这个对象包含每一个无效的input验证的集合。为了访问这个属性,使用下面的语法: formName.inputfieldName.$error
如果验证失败,则此属性将是true的(因为length>0)。 控制验证时的样式当AngularJS处理的验证时,它将根据验证的状态增加一些特定的class属性。 这些class是: .ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}
这些class对应着其对应的验证对象的结果。 当一个字段是无效的,?? input.ng-invalid { border: 1px solid red; } input.ng-valid { border: 1px solid green; } ? 全部放一起试试让我们编写一个注册表单。本申请表单将包括姓名,Email,以及用户名。 ? 让我们定义一个form表单: 这个表单的名字是 现在,让我们添加用户的Name: ?我们增加了一个名字为name的输入框,并且将对象绑定在$scope对象的signup.name对象上(通过ng-model)。 我们还设置了几个验证。这些验证分别是:必须有一个长度为3或更多的名字。并且最大长度限制为20个字符。最后,名称应该是必填的。 让我们用属性来控制显示还是隐藏错误信息。我们还将使用$dirty属性,以确保当用户没有输入字符前错误信息不会显示: 让我们接着看Email验证: ?现在,那个错误信息只将在signup_form.submitted为true时才显示。我们可以这样实现signupForm方法: app.controller('signupController',['$scope',function($scope) { $scope.submitted = false; $scope.signupForm = function() { if ($scope.signup_form.$valid) { // Submit as normal } else { $scope.signup_form.submitted = true; } } }]); 现在,当用户尝试提交表单并且同时有一个无效的元素时,你可以捕获它,并告诉他们错误的原因。 当时去焦点时验证错误如果你想保留错误验证的实时性,那么可以在用户离开该输入框时显示错误信息。要做到这一点,我们可以添加一个指令,将添加一个新的变量。 我们使用ngFocus指令: app.directive('ngFocus',[function() { var FOCUS_CLASS = "ng-focused"; return { restrict: 'A',require: 'ngModel',element,ctrl) { ctrl.$focused = false; element.bind('focus',function(evt) { element.addClass(FOCUS_CLASS); scope.$apply(function() {ctrl.$focused = true;}); }).bind('blur',function(evt) { element.removeClass(FOCUS_CLASS); scope.$apply(function() {ctrl.$focused = false;}); }); } } }]); 要使用ngFocus,我们只需要简单加上这个指令到输入框元素上,像这样: 加上ngFocus指令后,将在输入框的blur和focus事件中注册相应操作,当焦点在该输入框时,它添加一个class(ng-focused),并且该输入框的$focused属性也将变为true。因此,你可以根据需求是否在焦点上来个性化设置显示错误消息。例如: 我希望这篇文章可以告诉你如何很酷炫的使用AngularJS来进行验证。 ? 原文:?(en) 注:原文有一些demo可供测试,若有需要请查看原文。 原文地址: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |