Angular 验证密码一致性

password check directive in angularjs

// directives.js
'use strict'

angular.module('fooApp')
    .directive('passMatch', function () {
        return {
            // restrict: 'A', // only activate on element attribute
            require: 'ngModel', // get a hold of NgModelController
            link: function (scope, elem, attrs, model) {
                if (!attrs.passMatch) {
                    console.error('passMatch expects a model as an argument!');
                    return;
                }
                scope.$watch(attrs.passMatch, function (value) {
                    // Only compare values if the second ctrl has a value.
                    if (model.$viewValue !== undefined && model.$viewValue !== '') {
                        model.$setValidity('passMatch', value === model.$viewValue);
                    }
                });
                model.$parsers.push(function (value) {
                    // Mute the nxEqual error if the second ctrl is empty.
                    if (value === undefined || value === '') {
                        model.$setValidity('passMatch', true);
                        return value;
                    }
                    var isValid = value === scope.$eval(attrs.passMatch);
                    model.$setValidity('passMatch', isValid);
                    return isValid ? value : undefined;
                });
            }
        }
    });

<form name="form">
    <input type="password" ng-model="login.password">
    <input type="password" ng-model="login.verify" nx-equal-ex="login.password" name="verify">
    <span ng-show="form.verify.$error.nxEqualEx">Must be equal!</span>
</form>

参考连接

• AngularJS Directive to check that passwords match
• password check directive in angularjs
• jsfiddle demo

Directive Resources

• Angular Custom Directive in Component Style
• [译] AngularJS 内幕详解之 Directive
• angularJS directive 详解