`
TRAMP_ZZY
  • 浏览: 141829 次
社区版块
存档分类
最新评论

angularjs 密码一致性校验

阅读更多
angularjs 校验密码字段一致性

directives.directive('pwCheck', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            var firstPassword = '#' + attrs.pwCheck;
            // 网上好多例子都掉了$(elem) 美元符号和括号
            $(elem).add(firstPassword).on('keyup', function () {
                scope.$apply(function () {
                    alert(elem.val());
                    var v = elem.val()===$(firstPassword).val();
                    ctrl.$setValidity('pwmatch',v);
                });
            });
        }
    };
});


 <div class="form-group" ng-class="{'has-error': developerForm.password.$dirty && developerForm.password.$invalid}">
                    <div class="col-sm-12">
                        <input type="password" ng-model="developer.password" name="password" id="password" class="form-control" placeholder="预设密码" required>
                    </div>
                    <p class="text-warning help-block" ng-show="developerForm.password.$dirty && developerForm.password.$invalid">
                        <small ng-show="developerForm.password.$error.required">预设密码必填!!</small>
                    </p>
                </div>
                <div class="form-group" ng-class="{'has-error': developerForm.rePassword.$dirty && developerForm.rePassword.$invalid}">
                    <div class="col-sm-12 ">
                        <input type="password" ng-model="developer.rePassword" name="rePassword" class="form-control" placeholder="确认密码" pw-check="password" required>
                    </div>
                    <p class="text-warning help-block" ng-show="developerForm.rePassword.$dirty && developerForm.rePassword.$invalid">
                        <small ng-show="developerForm.rePassword.$error.required">确认密码必填!!</small>
                        <small ng-show="developerForm.rePassword.$error.pwmatch">预设密码和确认密码不一致!!</small>
                    </p>
                </div>


http://angularjs4u.com/directives/angularjs-check-passwords-match-directive/
分享到:
评论

相关推荐

    AngularJs表单校验功能实例代码

    6. 自定义验证器`compare-pwd`用于比较两个密码输入框的内容是否一致。这是通过创建一个自定义指令来实现的,该指令会在用户输入时触发,并根据另一个密码输入框的内容来校验当前密码框的值。 在表单校验中,...

    AngularJs验证重复密码的方法(两种)

    本文将深入讲解如何在AngularJS中验证重复密码的两种不同方法,以及它们各自的优缺点。 ### AngularJS验证重复密码的两种方法 1. **方法一:利用ng-model和ng-show进行简单验证** 在第一种方法中,开发者使用...

    Angular实现模版驱动表单的自定义校验功能(密码确认为例)

    通过这种方式,我们可以为模版驱动的表单实现自定义验证功能,如密码确认,从而确保数据的正确性和安全性。这种自定义验证方法不仅适用于密码确认,还可以应用于其他任何需要自定义验证逻辑的场景,例如邮箱格式检查...

    文本框输入不合理数据时进行验证.rar

    - **数据一致性**:确保输入的数据与数据库中的数据保持一致,如用户密码的加密比对。 3. **服务器端框架集成验证**: - 使用如Spring MVC、ASP.NET MVC等框架提供的验证机制,可以通过注解或配置文件定义验证...

    基于SpringBoot的博客系统的设计与实现 (2).docx

    例如,可以设计用户表(user)、文章表(article)、评论表(comment)等,并通过适当的关联关系实现数据的一致性和完整性。 ##### 接口设计 API接口设计应遵循RESTful风格,确保接口清晰、一致。例如,可以设计如下接口...

Global site tag (gtag.js) - Google Analytics