无法匹配Angularjs中的两个密码

时间:2017-04-20 05:33:11

标签: javascript angularjs

您好我正在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'

我可以帮助解决这个问题吗?我不知道我在这里失踪了什么。我无法搞清楚。任何帮助,将不胜感激。谢谢。

2 个答案:

答案 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;。