我正在写一个密码验证指令:
Directives.directive("passwordVerify",function(){
return {
require:"ngModel",
link: function(scope,element,attrs,ctrl){
ctrl.$parsers.unshift(function(viewValue){
var origin = scope.$eval(attrs["passwordVerify"]);
if(origin!==viewValue){
ctrl.$setValidity("passwordVerify",false);
return undefined;
}else{
ctrl.$setValidity("passwordVerify",true);
return viewValue;
}
});
}
};
});
HTML:
<input data-ng-model='user.password' type="password" name='password' placeholder='password' required>
<input data-ng-model='user.password_verify' type="password" name='confirm_password' placeholder='confirm password' required data-password-verify="user.password">
如果表单中有2个密码字段,如果两个密码值相等,则受该指令影响的字段有效 . 问题是它以一种方式工作(即当我在密码验证字段中键入密码时) . 但是,更新原始密码字段时,密码验证不会生效 .
知道如何进行“双向绑定验证”吗?
24 回答
这应该解决它:
View:
Directive
我使用以下指令,因为我想重新验证两个输入字段,无论值1或值2是否已更改:
directive:
usage
不需要为此创建单独的指令 . 已经有一个build in Angular UI password validation tool . 有了这个,你可以这样做:
另一种观点是将一个输入的模型与另一个输入的值相匹配 .
因此,如果密码框的模型为
login.password
,则在验证框中设置以下属性:nx-equal="login.password"
,并测试formName.elemName.$error.nxEqual
. 像这样:Extended version:
对于我的一个新项目,我不得不修改上面的指令,这样只有当验证输入有值时才会显示
nxEqual
错误 . 否则,nxEqual
错误应该被静音 . 这是扩展版本:你会像这样使用它:
试试吧:http://jsfiddle.net/gUSZS/
我没有指示就完成了 .
https://github.com/wongatech/angular-confirm-field是一个很好的项目 .
这里的示例http://wongatech.github.io/angular-confirm-field/
下面的代码显示了具有已实现功能的2个输入字段
从角度1.3.0-beta12开始,无效输入请注意,然后验证,如您所见:http://plnkr.co/edit/W6AFHF308nyKVMQ9vomw?p=preview . 引入了一个新的验证器管道,您可以附加到此以实现相同的功能 .
实际上,在那个笔记上我已经为常见的额外验证器创建了一个凉亭组件:https://github.com/intellix/angular-validators包括这个 .
我之前成功使用过该指令:
用法
我正在处理同样的问题,并发现了Piotr Buda写的关于它的好消息 . 这是一个很好的阅读,它很好地解释了这个过程 . 代码如下:
所以你可以这样做:
归功于作者
这不够好:
简单,对我来说效果很好 .
这个解决方案类似于Dominic Watson给出的解决方案,它使用$ validators并且是我最喜欢的解决方案 . 唯一的变化是您可以观看表达式 .
来自https://code.angularjs.org/1.3.15/docs/api/ng/type/ngModel.NgModelController
我正在使用角度1.3 . 我的指令看起来像这样
使用它
为了验证具有两个输入字段的表单,我找到了最合适的方式
指令
HTML
This works both ways and it is simple and clean
JavaScript
HTML: note the match directive
您可以使用此示例克隆repo https://github.com/rogithub/roangularjs
不是指令解决方案,但对我有用:
在控制器中:
http://plnkr.co/edit/QDTnipCsHdg56vgygsqC?p=preview
以下是我对这个问题的看法 . 该指令将与表单值而不是范围进行比较 .
在HTML中,现在引用的是实际形式而不是范围值:
为了在两个输入都发生变化时实现验证,我使用以下代码(这是其他所有答案的组合):
首先,我要感谢Fredric发布这个优秀的例子 . 我巧合地遇到了一个小问题 . 你发布的小提琴http://jsfiddle.net/gUSZS/
如果您输入密码,然后在验证输入元素中键入相同的密码一切正常,但尝试向第二个框添加一个空格,角度将自动修剪该空间 . 这意味着该指令不会“看到”额外的空间 . 现在密码不同,但表单仍然有效 .
为了解决这个问题,我们需要添加
到输入元素 . 这在角度1.0.3中不起作用,所以如果你想在这个小提琴中尝试它,你需要将1.1.1添加到小提琴(http://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.js)
但是,再次,弗雷德里克,我将在我的应用程序中使用您的解决方案!
安东P.S.我想评论弗雷德里克的帖子,但我是这个论坛的新手,似乎没有足够的信誉 . 如果您喜欢,我们非常感谢你们中的一些人可以投票我的评论:-)
不需要额外的指令,这是我对此的看法:
HTML:
使用Javascript:
Regex.escape()可以在哪里找到here .
奇迹般有效!
要添加到大量现有解决方案中,这对我来说非常有用 .
( Jan Laussmann 回答停止使用最新的AngularJS beta版本) .
directive:
usage
display error
这对我有用 .
Directive:
HTML:
当我尝试构建自己的指令时,我遇到了同样的问题,并且我使用此添加进行了修复
其中ctrl是我的ngModelController
这是我的看法
这是我的指示
这样的东西适合我:
JS:
HTML:
保持简单和愚蠢(KISS)原则可能对此有用 . 通过执行以下操作,更快速,更轻松地检查两个密码是否匹配:
在提交表单之前,您可以在js中执行此操作
您也可以在JSfiddle中进行测试 .