Angular ng消息:如何检查密码确认
Angular ng-messages: how to check password confirmation?
情况：
我在我的angular应用程序中使用ng消息指令进行即时验证。一切都很好，除了一件事：我需要验证字段"密码确认"，但不知道该怎么做。
代码：
<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消息检查密码确认是否匹配？
最简单的方法是使用模式。对我来说效果很好！
<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>
最好的方法是使用指令。这里的主要问题是，需要监视密码和密码确认输入。
以下是可以帮助的解决方案
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>在开发时，您可能会面临这样一个事实，即您需要创建自己的检查，这将影响表单的有效性。如果这些检查很简单，例如两个值的比较，那么最好使用通用指南，而不是为每种情况编写自己的检查。查看使用表单错误指令。
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>以下是我所做的(使用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, "''$&");
}
});
ngMessage通过添加$error来工作message_field_name到表单对象中的DOM字段名(当然在范围内(。因此，如果您的DOM表单名称为auentification_form，并且DOM字段名称为password_confirmation时，您需要将$scope.auentification-form.password_confiramination.$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;
});
我只使用了离子(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>
相关文章：
- 如何在ajax中检查密码是否小于8个字符
- 检查密码匹配时出错
- 检查密码-代码中的错误在哪里
- 检查密码是否匹配
- 我正在尝试制作一个nocatsplash页面 - 它使用HTML代码来检查密码并在输入正确的密码时重定向访问者
- 键入时检查密码是否匹配
- 检查密码是否与jquery匹配
- 检查密码匹配问题(JavaScript）
- 检查密码输入以启用按钮的Javascript
- 正在检查密码强度
- Angularjs检查密码的指令已经重复，不能工作
- onsubmit检查密码
- 如何检查密码和确认密码在AngularJS中也是一样
- 检查密码是否等于jQuery
- 如何创建仪表来检查密码的强度在php
- 检查密码是否只包含字母、数字或一些额外字符
- Angular ng消息:如何检查密码确认
- 使用javascript/jquery检查密码强度
- 如何用确认密码字段检查密码字段
- JavaScript帮助检查密码是否匹配
