AngularJS不灵密码确认NOMATCH？ [英] AngularJS password confirmation noMatch not working?

查看：218
本文介绍了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：

 ＆LT; D​​IV CLASS =字段集NG-CLASS ={'有错误：！formData.password $无效和放大器;＆安培; formData.password $质朴} ＆GT;
   ＆LT;标签＆gt;密码和LT; /标签＆gt;
   ＆LT; INPUT TYPE =密码ID =密码NAME =密码NG模型=formData.passwordNG-= MINLENGTH8NG-MAXLENGTH =20NG-模式=/（= * [AZ]）（= * [AZ]）（= * [^ A-ZA-Z]）/占位=需要密码/＆GT？。？。   ＆LT; p NG秀=。signupForm.password $ error.required级=错误＆GT; * LT; / P＆GT;
   ＆LT; p NG秀=。signupForm.password $ error.minlength级=错误＆GT;
      密码必须是8到20个字符之间的＆LT; / P＆GT;
   ＆LT; p NG秀=。signupForm.password $ error.pattern级=错误＆GT;
      必须包含一个低级放大器;放大器;大写字母，和一个非字母字符（数字或符号。）LT; / P＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV CLASS =字段集NG-CLASS ={'有错误：formData.password_c $无效和放大器;＆安培; formData.password_c $质朴！}＆GT;
   ＆LT;标签=password_c＆GT;确认密码＆LT; /标签＆gt;
   ＆LT;输入类型=密码ID =password_cNAME =password_cNG模型=formData.password_c占位符=确认密码需要有效的密码-C /＆GT;   ＆LT; p NG秀=$ signupForm.password_c error.noMatch。阶级=错误＆GT;密码不匹配＆LT; / SPAN＆GT;
   ＆LT; p NG秀=。signupForm.password_c $ error.required级=错误＆GT; * LT; / P＆GT;
＆LT; / DIV＆GT;

有关密码的字符验证工作，但对于确认密码NOMATCH功能无法正常工作。

可能是什么问题？谢谢！ ：）


解决方案

您需要通过您的原始密码，以指令，以及/

请参阅下面的工作演示

\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 =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序＆GT;\r
  ＆LT; D​​IV NG控制器=homeCtrl＆GT;\r
    ＆LT; P＆GT;密码：{{formData.password}}＆LT; / P＆GT;\r
    ＆LT;表格名称=signupForm＆GT;\r
      ＆LT; D​​IV 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; D​​IV 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

\r
\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 &amp; 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 &amp; 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屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆