`

angularjs自定义指令检验两次输入的密码是否一致

 
阅读更多
一、angularjs自定义指令检验两次输入的密码是否一致
'use strict';

ResetPasswordApp.directive('pwCheck', [function () {
    return {
        restrict: 'A',
        require: "ngModel",
        link: function(scope, elem, attrs, ctrl) {
            var otherInput = elem.inheritedData("$formController")[attrs.pwCheck];
            ctrl.$parsers.push(function(value) {
                ctrl.$setValidity("pwCheck",value === otherInput.$viewValue);
                return value;
            });

            otherInput.$parsers.push(function(value) {
                ctrl.$setValidity("pwCheck", value === ctrl.$viewValue);
                return value;
            });
        }
    };
}]);



<form ng-controller="confimPwFormController" ng-submit="submit()" id="confirmPwForm" name="confirmPwForm">
	<div class="form-group">
		<input type="password" placeholder="请输入新密码" ng-model="confirm.password"  name="password" required=true class="required form-control" />
	</div>
	<div class="form-group">
		<input type="password" placeholder="请再次输入新密码" ng-model="confirm.plainPassword" pw-check="password"  name="plainPassword" required class="required form-control" />
	</div>
	<div class="form-group">
		<input type="submit" class="btn btn-info btn-block" value="完成"   ng-disabled="confirmPwForm.$invalid"/>
	</div>
</form>
分享到:
评论

相关推荐

    AngularJS 自定义指令 - ECharts 2 雷达图

    在本文中,我们将深入探讨如何在AngularJS框架中创建自定义指令来封装ECharts 2的雷达图。ECharts是一款由百度开发的开源JavaScript图表库,它提供了丰富的可视化图表类型,包括雷达图。AngularJS是一个强大的前端...

    AngularJS 自定义指令 - ECharts 2 折线图

    在这个场景中,我们关注的是如何利用AngularJS的自定义指令来封装ECharts 2的折线图功能。ECharts是一个基于JavaScript的开源可视化库,它提供了丰富的图表类型,包括折线图、柱状图、饼图等,适用于各种数据展示...

    angularjs自定义指令directive正则表达校验

    在AngularJS中,自定义指令通过`@Directive`装饰器声明,其基本结构包括: ```javascript app.directive('directiveName', function() { return { restrict: 'AECM', // A - attribute, E - element, C - class, ...

    AngularJS 自定义指令 - ECharts 2 柱状图

    总的来说,通过 AngularJS 的自定义指令,我们可以将 ECharts 2 的柱状图封装成一个易于复用和维护的组件,使得在页面中多次调用柱状图变得更加便捷和高效。同时,这也展示了 AngularJS 如何优雅地结合第三方库,...

    angularjs指令 下拉框

    "angularjs指令 下拉框"这个主题聚焦于如何利用AngularJS创建一个自定义的下拉框(Dropdown)指令。下拉框在Web开发中非常常见,常用于选项选择或者导航菜单。 首先,我们需要理解AngularJS中的指令是如何工作的。...

    AngularJS 自定义指令详解及实例代码

    AngularJS是一个强大的前端JavaScript框架,其核心特性之一就是自定义指令。自定义指令允许开发者扩展HTML,创建新的元素或属性,以实现特定的功能。在本文中,我们将深入探讨AngularJS自定义指令的创建、使用以及...

    AngularJS创建自定义指令的方法详解

    - **文本和属性绑定**:使用`$interpolate`服务在编译过程中绑定文本和属性,AngularJS会检测匹配到的文本和属性值是否包含内嵌表达式。 - **SVG元素的特例**:由于SVG DOM API的限制,某些属性不能直接使用绑定语法...

    AngularJS 自定义指令详解及示例代码

    在AngularJS中,自定义指令是构建可复用组件的关键特性,它允许开发者创建全新的HTML元素、属性、CSS类甚至注释,从而定制化DOM元素的行为。 自定义指令的定义通常包括以下几个部分: 1. **restrict**:限制指令...

    详解angularJS自定义指令间的相互交互

    AngularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用。默认值为false不能使用嵌套,true为可以使用嵌套。在哪个标签上使用ng-transclude就在哪个标签内进行嵌套。 代码示例:...

    Angularjs自定义指令实现三级联动选择地理位置

    在本文中,我们将深入探讨如何使用AngularJS框架创建一个自定义指令来实现三级联动选择地理位置的功能。这个功能在很多Web应用中都非常常见,比如在线地图服务、房地产网站或者物流跟踪系统,用户需要根据国家、省份...

    angularjs自定义正则表达校验指令directive

    创建自定义指令需要使用`angular.module().directive()`方法,其中`directive`函数接收两个参数:指令名称和一个配置对象。配置对象可以包含多个选项,如`restrict`(限制指令的应用方式,如元素、属性、类或注释)...

    Angularjs自定义指令Directive详解

    使用自定义指令时,应该遵循AngularJS的最佳实践,比如最小化对DOM的直接操作,避免过度创建指令,以及保持指令功能的单一性。这些原则有助于维护代码的清晰性和可扩展性。 总结来说,AngularJS的自定义指令是一个...

    详解Angularjs 自定义指令中的数据绑定

    有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么...自定义指令在 Angularjs 项目中主要有两大用途: 1.封装指定组件的DOM操作 Angularjs 期望的开发方式是将DOM

    AngularJS自定义指令之复制指令实现方法

    本文实例讲述了AngularJS自定义指令之复制指令实现方法。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-...

    angularjs自定义select搜索查找插件

    在本文中,我们将深入探讨如何使用AngularJS来创建一个自定义的Select组件,该组件具有选项自定义和搜索查找功能。AngularJS是一个流行的JavaScript框架,它提供了强大的数据绑定和依赖注入机制,使得构建动态Web...

    AngularJS自定义指令实现面包屑功能完整实例

    本文实例讲述了AngularJS自定义指令实现面包屑功能。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html&gt; &lt;html lang=zh-CN ng-app=myApp&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; &lt;meta ...

    关于Angularjs中自定义指令一些有价值的细节和技巧小结

    在AngularJS中,自定义指令是扩展HTML能力的关键特性,...总之,自定义指令是AngularJS的核心部分,通过它们我们可以构建可复用、可维护的组件。理解并掌握这些细节和技巧,能帮助开发者创建出高效且灵活的应用程序。

Global site tag (gtag.js) - Google Analytics