AngularJS不灵密码确认NOMATCH? [英] AngularJS password confirmation noMatch not working?
本文介绍了AngularJS不灵密码确认NOMATCH?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在这里有这个脚本:
angular.module('UserValidation',[])。指令(validPasswordC',函数(){
返回{
要求:'ngModel',
链接:功能(范围,榆树,ATTRS,CTRL){
Ctrl键。$ parsers.unshift(功能(viewValue,$范围){
VAR NOMATCH = viewValue!= scope.signupForm.password。$ viewValue
Ctrl键。$ setValidity('NOMATCH'!NOMATCH)
})
}
}
});
和这里的HTML:
< DIV CLASS =字段集NG-CLASS ={'有错误:!formData.password $无效和放大器;&安培; formData.password $质朴} >
<标签>密码和LT; /标签>
< INPUT TYPE =密码ID =密码NAME =密码NG模型=formData.passwordNG-= MINLENGTH8NG-MAXLENGTH =20NG-模式=/(= * [AZ])(= * [AZ])(= * [^ A-ZA-Z])/占位=需要密码/&GT?。?。 < p NG秀=。signupForm.password $ error.required级=错误> * LT; / P>
< p NG秀=。signupForm.password $ error.minlength级=错误>
密码必须是8到20个字符之间的< / P>
< p NG秀=。signupForm.password $ error.pattern级=错误>
必须包含一个低级放大器;放大器;大写字母,和一个非字母字符(数字或符号。)LT; / P>
< / DIV>< DIV CLASS =字段集NG-CLASS ={'有错误:formData.password_c $无效和放大器;&安培; formData.password_c $质朴!}>
<标签=password_c>确认密码< /标签>
<输入类型=密码ID =password_cNAME =password_cNG模型=formData.password_c占位符=确认密码需要有效的密码-C /> < p NG秀=$ signupForm.password_c error.noMatch。阶级=错误>密码不匹配< / SPAN>
< p NG秀=。signupForm.password_c $ error.required级=错误> * LT; / P>
< / DIV>
有关密码的字符验证工作,但对于确认密码NOMATCH功能无法正常工作。
可能是什么问题?谢谢! :)
解决方案
您需要通过您的原始密码,以指令,以及/
请参阅下面的工作演示
\r
\r\r
\r VAR应用= angular.module('应用',[]);\r
app.directive('validPasswordC',函数(){\r
返回{\r
要求:'ngModel',\r
范围: {\r
\r
参考:'= validPasswordC\r
\r
},\r
链接:功能(范围,榆树,ATTRS,CTRL){\r
Ctrl键。$ parsers.unshift(功能(viewValue,$范围){\r
\r
VAR NOMATCH = viewValue!= scope.reference\r
CTRL $ setValidity('NOMATCH',NOMATCH!)。\r
回报(NOMATCH)NOMATCH:?!NOMATCH;\r
});\r
\r
范围$表(参考功能(价值){。\r
CTRL $ setValidity('NOMATCH',价值=== CTRL $ viewValue)。\r
\r
});\r
}\r
}\r
});\r
app.controller('homeCtrl',函数($范围){\r
\r
\r
\r
\r
});
\r
&LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
&LT; DIV NG-应用=应用程序&GT;\r
&LT; DIV NG控制器=homeCtrl&GT;\r
&LT; P&GT;密码:{{formData.password}}&LT; / P&GT;\r
&LT;表格名称=signupForm&GT;\r
&LT; DIV CLASS =字段集NG-CLASS ={'有错误:formData.password $无效和放大器;&安培; formData.password $质朴!}&GT;\r
&LT;标签&gt;密码和LT; /标签&gt;\r
&LT; INPUT TYPE =密码ID =密码NAME =密码NG模型=formData.passwordNG-= MINLENGTH8NG-MAXLENGTH =20NG-模式=/(= * [AZ])(= * [AZ])(= * [^ A-ZA-Z])/占位=需要密码/&GT?。?。\r
\r
&LT; p NG秀=。signupForm.password $ error.required级=错误&GT; * LT; / P&GT;\r
&LT; p NG秀=。signupForm.password $ error.minlength级=错误&GT;\r
密码必须是8到20个字符之间的&LT; / P&GT;\r
&LT; p NG秀=。signupForm.password $ error.pattern级=错误&GT;\r
必须包含一个低级放大器;放大器;大写字母,和一个非字母字符(数字或符号。)LT; / P&GT;\r
&LT; / DIV&GT;\r
\r
&LT; DIV CLASS =字段集NG-CLASS ={'有错误:formData.password_c $无效和放大器;&安培; formData.password_c $质朴!}&GT;\r
&LT;标签=password_c&GT;确认密码&LT; /标签&gt;\r
&LT;输入类型=密码ID =password_cNAME =password_cNG模型=formData.password_c占位符=确认密码有效的密码-C =formData.password要求/&GT;\r
\r
&LT; p NG秀=$ signupForm.password_c error.noMatch。阶级=错误&GT;密码不匹配&LT; / SPAN&GT;\r
&LT; p NG秀=。signupForm.password_c $ error.required级=错误&GT; * LT; / P&GT;\r
&LT; / DIV&GT;\r
&LT; /表及GT;\r
&LT; / DIV&GT;\r
&LT; / DIV&GT;
\r
I have this script here:
angular.module('UserValidation', []).directive('validPasswordC', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue, $scope) {
var noMatch = viewValue != scope.signupForm.password.$viewValue
ctrl.$setValidity('noMatch', !noMatch)
})
}
}
});
And here's the html:
<div class="fieldset" ng-class="{'has-error':formData.password.$invalid && !formData.password.$pristine}">
<label>Password</label>
<input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" placeholder="password" required />
<p ng-show="signupForm.password.$error.required" class="error">*</p>
<p ng-show="signupForm.password.$error.minlength" class="error">
Passwords must be between 8 and 20 characters.</p>
<p ng-show="signupForm.password.$error.pattern" class="error">
Must contain one lower & uppercase letter, and one non-alpha character (a number or a symbol.)</p>
</div>
<div class="fieldset" ng-class="{'has-error':formData.password_c.$invalid && !formData.password_c.$pristine}">
<label for="password_c">Confirm Password</label>
<input type="password" id="password_c" name="password_c" ng-model="formData.password_c" placeholder="confirm password" valid-password-c required />
<p ng-show="signupForm.password_c.$error.noMatch" class="error">Passwords do not match.</span>
<p ng-show="signupForm.password_c.$error.required" class="error">*</p>
</div>
The character validation for password is working, but the "noMatch" function for confirm password is not working.
What might be the problem? Thanks! :)
解决方案
You need to pass your original password to directive as well/
Please see working demo below
var app = angular.module('app', []);
app.directive('validPasswordC', function() {
return {
require: 'ngModel',
scope: {
reference: '=validPasswordC'
},
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue, $scope) {
var noMatch = viewValue != scope.reference
ctrl.$setValidity('noMatch', !noMatch);
return (noMatch)?noMatch:!noMatch;
});
scope.$watch("reference", function(value) {;
ctrl.$setValidity('noMatch', value === ctrl.$viewValue);
});
}
}
});
app.controller('homeCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<p>Password:{{formData.password}}</p>
<form name="signupForm">
<div class="fieldset" ng-class="{'has-error':formData.password.$invalid && !formData.password.$pristine}">
<label>Password</label>
<input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" placeholder="password" required />
<p ng-show="signupForm.password.$error.required" class="error">*</p>
<p ng-show="signupForm.password.$error.minlength" class="error">
Passwords must be between 8 and 20 characters.</p>
<p ng-show="signupForm.password.$error.pattern" class="error">
Must contain one lower & uppercase letter, and one non-alpha character (a number or a symbol.)</p>
</div>
<div class="fieldset" ng-class="{'has-error':formData.password_c.$invalid && !formData.password_c.$pristine}">
<label for="password_c">Confirm Password</label>
<input type="password" id="password_c" name="password_c" ng-model="formData.password_c" placeholder="confirm password" valid-password-c="formData.password" required />
<p ng-show="signupForm.password_c.$error.noMatch" class="error">Passwords do not match.</span>
<p ng-show="signupForm.password_c.$error.required" class="error">*</p>
</div>
</form>
</div>
</div>
这篇关于AngularJS不灵密码确认NOMATCH?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文