密码匹配angularjs验证 [英] Password match angularjs validation

问题描述

尝试在 angular js 中使用自定义指令匹配密码.虽然我看过几个谷歌教程，但我无法让它工作.我创建了一个 Plunker，显示它在 plunker 上不起作用.

HTML:

 <div class="form-group" ng-class="{ 'has-error': form.password.$invalid && !form.username.$pristine }"><label for="password">密码</label><input type="password" name="password" id="password" class="form-control" ng-model="user.password" required ng-minlength="6" ng-maxlength="12"/>

<div class="form-group" ng-class="{ 'has-error': form.confirm-password.$invalid && !form.confirm-password.$pristine }"><label for="confirm-password">确认密码</label><input type="password" name="confirm-password" id="confirm-password" class="form-control" ng-model="user.confirmpwd" required equal="{{user.password}}"/><span ng-show="user.confirmpwd.$error.equal" class="help-block">密码与上面不匹配</span>

JAVASCRIPT:

app.directive('equal', [功能() {var link = function($scope, $element, $attrs, ctrl) {var 验证 = 函数(视图值){var compareModel = $attrs.equal;console.log(viewValue + ':' + compareModel);if(!viewValue || !comparisonModel){//这是有效的，因为我们没有什么可比较的ctrl.$setValidity('equal', true);}//如果模型低于我们比较的模型，则有效ctrl.$setValidity('equal', viewValue === compareModel );返回视图值；};ctrl.$parsers.unshift(validate);ctrl.$formatters.push(validate);$attrs.$observe('equal', function(comparisonModel){返回验证(ctrl.$viewValue)；});};返回 {要求:'ngModel'，链接:链接};}]);

问题似乎与自定义指令有关，它似乎没有正确绑定到 ngModel 项?我觉得我一定错过了一些简单的东西，我才刚刚开始学习 AngularJS.

解决方案

密码字段绑定应该可以工作，但是您正在验证密码字段的长度应该至少为 6 个字符，这意味着它只会在您之后绑定到模型输入 6 个或更多字符.在那之前它将是 undefined，这就是我假设的 console.log 语句中得到的内容.

但是还有其他问题.不会显示错误消息，因为您的字段名称是 confirm-password.您应该将其命名为 confirmPassword 或不带破折号的名称.该名称被 Angular 用作对象属性，并且 JavaScript 对象键不能包含破折号.

因此表单中的密码确认部分应如下所示:

<div class="form-group" ng-class="{ 'has-error': form.confirmPassword.$invalid && !form.confirmPassword.$pristine }"><label for="confirm-password">确认密码</label><input type="password" name="confirmPassword" id="confirm-password" class="form-control" ng-model="user.confirmpwd" required equal="{{user.password}}"/><span ng-show="form.confirmPassword.$error.equal" class="help-block">密码与上面不匹配</span>

Attempting to match passwords using a custom directive in angular js. I can't get it to work, although I have looked at several google tutorials. I have created a Plunker that shows it not working at plunker.

HTML:

    <div class="form-group" ng-class="{ 'has-error': form.password.$invalid && !form.username.$pristine }">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" class="form-control" ng-model="user.password" required ng-minlength="6" ng-maxlength="12"/>
    </div>
    <div class="form-group" ng-class="{ 'has-error': form.confirm-password.$invalid && !form.confirm-password.$pristine }">
        <label for="confirm-password">Confirm Password</label>
        <input type="password" name="confirm-password" id="confirm-password" class="form-control" ng-model="user.confirmpwd" required equal="{{user.password}}"/>
        <span ng-show="user.confirmpwd.$error.equal" class="help-block">Password does not match above</span>
    </div>

JAVASCRIPT:

app.directive('equal', [
function() {

var link = function($scope, $element, $attrs, ctrl) {

  var validate = function(viewValue) {
    var comparisonModel = $attrs.equal;
      console.log(viewValue + ':' + comparisonModel);

    if(!viewValue || !comparisonModel){
      // It's valid because we have nothing to compare against
      ctrl.$setValidity('equal', true);
    }

    // It's valid if model is lower than the model we're comparing against
    ctrl.$setValidity('equal', viewValue === comparisonModel );
    return viewValue;
  };

  ctrl.$parsers.unshift(validate);
  ctrl.$formatters.push(validate);

  $attrs.$observe('equal', function(comparisonModel){
        return validate(ctrl.$viewValue);
  });

};

return {
  require: 'ngModel',
  link: link
};
}]);

The problem seems to be around the custom directive, it doesnt seem to be binding to the ngModel item properly? I feel like I must be missing something simple, I am just starting to learn AngularJS.

解决方案

The password field binding should work, but you are validating that the password field should be at least 6 characters long, meaning it will be bound to model only after you enter 6 or more characters. Until then it will be undefined, which is what you are getting in the console.log statement I assume.

However there is other problem. The error message will not be shown, because your field name is confirm-password. You should name it confirmPassword or something without dashes. The name is used by Angular as an object property and JavaScript object key can not contain dashes.

So the password confirm part of your form should look something like this:

<div class="form-group" ng-class="{ 'has-error': form.confirmPassword.$invalid && !form.confirmPassword.$pristine }">
    <label for="confirm-password">Confirm Password</label>
    <input type="password" name="confirmPassword" id="confirm-password" class="form-control" ng-model="user.confirmpwd" required equal="{{user.password}}"/>
    <span ng-show="form.confirmPassword.$error.equal" class="help-block">Password does not match above</span>
</div>

这篇关于密码匹配angularjs验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！