您好我正在Angularjs开发注册表单,我是angularjs的新手。我在做验证。我已经完成了必要的现场验证。我现在正在做密码并确认密码验证。两个密码都应该匹配否则我弹出错误消息。我提到了https://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match/。
<div class="inputblock" ng-class="{ 'has-error' : form.password.$invalid && form.password.$dirty}">
<div>
<span class="ang-error" style="color:red" ng-show="form.password.$dirty && form.password.$invalid">
<span ng-show="form.password.$invalid && form.password.$dirty">*</span>
</span>
<span class="ang-error" style="color:white" ng-show="form.password.$error.minlength">
Too short!
</span>
<span class="ang-error" style="color:white" ng-show="form.password.$error.maxlength">
Too long!
</span>
</div>
<span class="input-icon"><img src="images/lock-icon.png"></span>
<input type="password" class="with-icon" placeholder="{{ 'Password' | translate }}" ng-model="user.password" required="" name="password" ng-minlength="8" ng-maxlength="15">
</div>
<div class="inputblock" ng-class="{ 'has-error' : form.confirmpassword.$invalid && form.confirmpassword.$dirty && form.confirmpassword.$error.pwmatch">
<span class="input-icon"><img src="images/lock-icon.png"></span>
<input pw-check='user.password' type="password" class="with-icon" placeholder="{{ 'Confirm Password' | translate }}" ng-model="user.confirmpassword" required="" name="confirmpassword">
<span class="ang-error" style="color:red" ng-show="form.confirmpassword.$dirty && form.confirmpassword.$invalid && form.confirmpassword.$error'">
<span ng-show="form.confirmpassword.$invalid && form.confirmpassword.$dirty">*</span>
<span ng-show='form.confirmpassword.$error.pwmatch'>Passwords don't match.</span>
</span>
</div>
</div>
我的控制器代码如下。
(function (angular) {
var app = angular.module('RoslpApp').controller('Registration', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', '$interval', 'toastr', 'cfg','$window',
function ($scope, $http, $translatePartialLoader, $translate, $state, $interval, toastr, cfg,$window) {
//some code here
}])
app.directive('pwCheck', [function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
var firstPassword = '#' + attrs.pwCheck;
elem.add(firstPassword).on('keyup', function () {
scope.$apply(function () {
var v = elem.val() === $(firstPassword).val();
ctrl.$setValidity('pwmatch', v);
});
});
}
}
}]);
}(angular));
我有以下错误。
angular.js:12416 Error: [$parse:lexerr] Lexer Error: Unterminated quote at columns 61-62 ['] in expression [form.confirmpassword.$dirty && form.confirmpassword.$invalid '].
http://errors.angularjs.org/1.4.5/$parse/lexerr?p0=Unterminated%20quote&p1=s%2061-62%20%5B'%5D&p2=form.confirmpassword.NaNirty%20%26%26%20form.confirmpassword.%invalid%20'
我可以帮助解决这个问题吗?我不知道我在这里失踪了什么。我无法搞清楚。任何帮助,将不胜感激。谢谢。
答案 0 :(得分:3)
你有一个额外的撇号:
<span class="ang-error" style="color:red" ng-show="form.confirmpassword.$dirty && form.confirmpassword.$invalid && form.confirmpassword.$error'">
结束时:
.$error' <-- ">
答案 1 :(得分:0)
您必须在html模板中进行一些修改
pw-check='SOME_ID_TO_COMPARE'
因此,在您的第一个密码中,您必须提供一些ID,例如&#34; my_id_1&#34;然后你必须在第二个密码的指令中传递该ID,如pw-heck =&#39; my_id_1&#39;。