如何在角度js中验证密码?

时间:2015-09-17 03:53:32

标签: javascript angularjs validation angularjs-directive angularjs-scope

你能告诉我如何在角度js中验证密码。实际上我的表格中有两个密码。一个是密码,另一个是确认密码。当两者相同时它是有效的,否则表格无效。我申请验证最小长度和最大长度。但如何在角度js

中比较密码和确认密码

http://codepen.io/anon/pen/bVpeeP

<div>
    <input type="password" placeholder="password" ng-model="user.password" name="password" ng-minlength="2" ng-maxlength="5" required style="width: 300px;padding: 20px;margin-top: 50px">
    <span ng-show="myform.password.$dirty &&myform.password.$error.required">Required</span>
    <span ng-show="myform.password.$dirty && myform.password.$error.minlength">too short</span>
    <span ng-show="myform.password.$dirty && myform.password.$error.maxlength">too Long</span>

</div>

<div>
    <input type="password" placeholder="confirmed password" ng-model="user.confiredpassword" name="confiredpassword" ng-minlength="2" ng-maxlength="5" required style="width: 300px;padding: 20px;margin-top: 50px">
    <span ng-show="myform.confiredpassword.$dirty && myform.confiredpassword.$error.required">Required</span>
    <span ng-show="myform.confiredpassword.$dirty && myform.confiredpassword.$error.minlength">too short</span>
    <span ng-show="myform.confiredpassword.$dirty && myform.confiredpassword.$error.maxlength">too Long</span>

</div>

如果两个密码都不相同。那么我需要显示错误吗? 感谢

2 个答案:

答案 0 :(得分:0)

你可以从控制器那里做到这一点。使用各自的id比较两个输入框的值,并将结果传递给范围。

答案 1 :(得分:0)

var compareTo = function() {
    return {
        require: "ngModel",
        scope: {
            otherModelValue: "=compareTo"
        },
        link: function(scope, element, attributes, ngModel) {

            ngModel.$validators.compareTo = function(modelValue) {
                return modelValue == scope.otherModelValue;
            };

            scope.$watch("otherModelValue", function() {
                ngModel.$validate();
            });
        }
    };
};

module.directive("compareTo", compareTo);


<input type="password" name="confirmPassword" 
        ng-model="registration.user.confirmPassword"
        required 
        compare-to="registration.user.password" />

<div ng-messages="registrationForm.confirmPassword.$error"
      ng-messages-include="messages.html"></div>

看看here