堆栈内存溢出
  繁体   English   中英

Angular ng-messages：如何检查密码确认？

[英]Angular ng-messages: how to check password confirmation?

 原文  2015-07-28 08:35:32  2   6    javascript/ angularjs/ validation/ ionic-framework/ ng-messages

问题描述

情况：

我正在使用ng-messages指令在我的角度应用程序中进行即时验证。 一切都很好，除了一件事：我需要验证字段'密码确认'，不知道该怎么做。

代码： 

<form name="autentication_form" novalidate="" ng-submit="submit_register()">

    <label class="item item-input">
        <span class="input-label">Email</span>
        <input type="text" name="email" ng-model="registerData.email" required>

        <div class="form-errors" ng-messages="autentication_form.email.$error" role="alert" ng-if='autentication_form.email.$dirty'>
            <div class="form-error" ng-message="required">You did not enter the email</div>
        </div>
    </label>

    <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" name="password" ng-model="registerData.password" required>

        <div class="form-errors" ng-messages="autentication_form.password.$error" role="alert" ng-if='autentication_form.password.$dirty'>
            <div class="form-error" ng-message="required">Please enter the password</div>
        </div>
    </label>

    <label class="item item-input">
        <span class="input-label">Password confirmation</span>
        <input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required>

        <div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" role="alert" ng-if='autentication_form.password_confirmation.$dirty'>
            <div class="form-error" ng-message="required">Password confirmation required</div>
        </div>
    </label>

</form>

问题：

如何使用ng-messages检查密码确认是否匹配？

6 个解决方案

解决方案1
 22  2015-12-23 08:02:54

最简单的方法是使用模式。 对我来说工作正常！ 

<input type="password" name="new_password1" ng-model="new_password1">

<input type="password" name="new_password2" ng-pattern="\b{{new_password1}}\b" ng-model="new_password2">
<div ng-messages="passwordForm.new_password2.$error">
    <div ng-message="pattern">Not equal!!!</div>
</div>

解决方案2
 9  2015-07-28 10:19:33

最好的方法是使用指令。 这里的主要问题是需要监视密码和密码确认输入。

这是可以提供帮助的解决方案 

 angular.module('app', ['ngMessages']) .controller('ctrl', function($scope) { $scope.registerData = {}; }) .directive('confirmPwd', function($interpolate, $parse) { return { require: 'ngModel', link: function(scope, elem, attr, ngModelCtrl) { var pwdToMatch = $parse(attr.confirmPwd); var pwdFn = $interpolate(attr.confirmPwd)(scope); scope.$watch(pwdFn, function(newVal) { ngModelCtrl.$setValidity('password', ngModelCtrl.$viewValue == newVal); }) ngModelCtrl.$validators.password = function(modelValue, viewValue) { var value = modelValue || viewValue; return value == pwdToMatch(scope); }; } } }); 
 <html ng-app="app"> <head> <script data-require="angular.js@~1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script> <script data-require="angular-messages@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-messages.js"></script> <script src="https://code.angularjs.org/1.3.15/angular.js"></script> <script src="script.js"></script> </head> <body ng-controller="ctrl"> <form name="autentication_form" novalidate="" ng-submit="submit_register()"> <label class="item item-input"> <span class="input-label">Email</span> <input type="text" name="email" ng-model="registerData.email" required="" /> <div class="form-errors" ng-messages="autentication_form.email.$error" ng-if='autentication_form.email.$touched'> <span class="form-error" ng-message="required">You did not enter the email</span> </div> </label> <label class="item item-input"> <span class="input-label">Password</span> <input type="password" name="password" ng-model="registerData.password" required /> <div class="form-errors" ng-messages="autentication_form.password.$error" ng-if='autentication_form.password.$touched'> <span class="form-error" ng-message="required">Please enter the password</span> </div> </label> <label class="item item-input"> <span class="input-label">Password confirmation</span> <input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required="" confirm-pwd="registerData.password" /> <div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" ng-if='autentication_form.password_confirmation.$touched'> <span class="form-error" ng-message="required">Password confirmation required</span> <span class="form-error" ng-message="password">Password different</span> </div> </label> </form> </body> </html>

解决方案3
 4  2016-02-03 09:57:57

在开发时，您可能会面临这样一个事实，即您需要创建自己的检查，这将影响表单的有效性。 如果这些检查很简单，比如两个值的比较，最好使用一般准则，而不是为每种情况编写自己的检查。 看看use-form-error指令。

关于jsfiddle的实例 。 

 angular.module('ExampleApp', ['use', 'ngMessages']) .controller('ExampleController', function($scope) { }); 
 .errors { color: maroon } 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script> <script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script> <div ng-app="ExampleApp"> <div ng-controller="ExampleController"> <form name="ExampleForm"> <label>Password</label> <input ng-model="password" required /> <br> <label>Confirm password</label> <input ng-model="confirmPassword" name="confirmPassword" use-form-error="isNotSame" use-error-expression="password && confirmPassword && password!=confirmPassword" required /> <div ng-show="ExampleForm.$error.isNotSame" class="errors">Passwords Do Not Match!</div> <div ng-messages="ExampleForm.confirmPassword.$error" class="errors"> <div ng-message="isNotSame"> Passwords Do Not Match (from ng-message)! </div> </div> </form> </div> </div>

解决方案4
 1  2017-04-21 05:41:41

这是我做的（使用ng-pattern ）： 

<md-input-container class="md-block">
  <label>New Password</label>
  <input ng-model="user.password" name="password" type="password" required ng-pattern="'.{8,}'" />
  <div ng-messages="form.password.$error">
    <div ng-message="required">Password required.</div>
    <div ng-message="pattern">Password must be at least 8 characters.</div>
  </div>
</md-input-container>
<md-input-container class="md-block">
  <label>Confirm Password</label>
  <input ng-model="user.confirmPassword" name="confirmPassword" type="password" ng-pattern="user.password|escapeRegex" required />
  <div ng-messages="form.confirmPassword.$error">
    <div ng-message="required">Password confirmation required.</div>
    <div ng-message="pattern">Passwords do not match.</div>
  </div>
</md-input-container>

以下过滤器将ng-pattern正则表达式转换为文字： 

module.filter('escapeRegex', function(){
  return function(str){
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
  }
});

解决方案5
 1  2018-04-01 00:41:13

ngMessage通过添加$ error来工作。 message_field_name到表单对象中的DOM字段名称（当然在范围内）。 因此，如果您的DOM表单名称是autentication_form且DOM字段名称是password_confirmation ，则需要设置$ scope.autentication_form.password_confirmation。$ error。 nomatch （或您想要的任何ngMessage名称）为true以显示“不匹配”错误。

标记： 

<input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required />

<div ng-messages="autentication_form.password_confirmation.$error">
                <div ng-message="required">Please repeat your password.</div>
                <div ng-message="nomatch">Doesn't match.</div>
            </div>
</div>

代码，没什么特别的，只看两个密码： 

$scope.$watch("registerData.password + registerData.password_confirmation", function () {
            $scope.autentication_form.password_confirmation.$error.nomatch = $scope.registerData.password !== $scope.registerData.password_confirmation;
        });

解决方案6
 -2  2016-01-17 12:54:36

我只使用离子（html）验证。

新密码需要新密码 

<label class="item item-input inputRadius">
<span class="input-label">Confirm Password</span>
<input type="password" placeholder="Confirm Password" ng-model="passwordUpdateInfo.confirmPassword" name="confirmPassword" required>
</label>
<div ng-show="passwordUpdateForm.$submitted || passwordUpdateForm.confirmPassword.$touched">
<div ng-show="passwordUpdateForm.confirmPassword.$error.required" class="errorMessage">Confirm Password is required</div>
</div>
<div ng-show="passwordUpdateInfo.confirmPassword.length > 0 && passwordUpdateInfo.confirmPassword != passwordUpdateInfo.newPassword">
    Password not match..(amar from india)
</div>
<button class="button button-positive button-block" ng-disabled="passwordUpdateInfo.confirmPassword.length > 0 && passwordUpdateInfo.confirmPassword != passwordUpdateInfo.newPassword">Update</button>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Angular material ng-messages未出现在对话框中 如何在模糊时触发ng消息？ 如何将ng-messages用于type =&#39;file&#39;？ ng-messages无法正常工作 ng-messages的Angular 1.5自定义验证指令 仅在$ touch为true时显示的角度ng-messages Angular动态设置ng-messages到name属性 清除控制器中的ng消息 动态ng消息和验证 如何使用 Material 将 ng-messages 添加到 AngularJS 中动态创建的输入
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM