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

本文给大家分享angularjs验证重复密码的两种方法。具体方法详情如下所示:

第一种:

<label for="password">密码</label>
<input id="password" name="password" type="password" ng-model="user.password" required>
<label for="repassword">重复密码</label>
<input id="repassword" name="repassword" type="password" ng-model="repassword" required>
<span style="color:red" ng-show="user.password!=repassword">两次密码不一致</span>
<input type="submit" class="btn btn-primary btn-lg" value="SAVE" ng-disabled="submit(userForm)"/>
/*JS*/
app.controller("main",function($scope){
$scope.submit=function(ngFormController){
return ngFormController.$invalid; /*valid的取反*/
};
});

这种是单纯的判断两个ng-model所在的值是否相等,不等则显示出被ng-show指令控制的信息,等则隐藏。

但这种办法虽然很简单,但是却有个我认为比较严重的缺陷:这个“密码不一致”并没有影响到ngFormController的内部。也就是说,即使它两次密码不正确,最后的提交按钮还是可以点击的,因为ngFormController的$invalid 并没有认为两次密码不正确是一种错误。

参考一下AngularJS的指令ng-maxlength等,他们却可以引起$invalid 的检测,所以要解决上面的问题,我觉得办法之一就是创建一个用于验证两次密码是否一致的自定义指令。

/*指令创建*/
app.directive('equals',function(){
return{
require:'ngModel',
link:function(scope,elm,attrs,ngModelCtrl){
function validateEqual(myValue){
var valid = (myValue === scope.$eval(attrs.equals));
ngModelCtrl.$setValidity('equal',valid);
return valid ? myValue : undefined;
}
ngModelCtrl.$parsers.push(validateEqual);
ngModelCtrl.$formatters.push(validateEqual);
scope.$watch(attrs.equals,function(){
ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
})
}
}
});
<!--html-->
<label for="password">密码</label>
<input id="password" name="password" type="password" ng-model="user.password" required>
<label for="repassword">重复密码</label>
<input id="repassword" name="repassword" type="password" ng-model="repassword" <!--注意这里将要使用我自定义的指令-->equals="user.password" required>
<span style="color:red" ng-show="user.password!=repassword">两次密码不一致</span>
<input type="submit" class="btn btn-primary btn-lg" value="SAVE" ng-disabled="submit(userForm)"/>

这样,加上第一个办法的判断,就可以完美地验证重复密码了。

以上所述是小编给大家介绍的AngularJs验证重复密码的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索angularjs
, 验证
, angularjs密码验证
重复密码
angularjs密码验证、重复密码验证、jquery验证重复密码、js验证重复密码、angularjs 表单验证,以便于您获取更多的相关知识。

时间: 2024-10-28 09:43:02

AngularJs验证重复密码的方法(两种)_AngularJS的相关文章

JS实现至少包含字母、大小写数字、字符的密码等级的两种方法_javascript技巧

本文实例讲述了JS实现至少包含字母.大小写数字.字符的密码等级的两种方法.分享给大家供大家参考.具体如下: 前言 密码,如果设置的太简单,很容易就被攻破,所以很多网站将密码设置的要求设置的挺严格,一般是字母.数字.字符3选2,区分大小写.对于设置得太简单的密码,予以错误提示.或者予以密码等级(低中高)显示,让用户设置高级密码.那如何利用JS实现呢? 实现代码如下: function passwordLevel(password) { var Modes = 0; for (i = 0; i <

C# 向Word中设置/更改文本方向的方法(两种)_C#教程

一般情况下在Word中输入的文字都是横向的,今天给大家分享两种方法来设置/更改一个section内的所有文本的方向及部分文本的方向,有兴趣的朋友可以试下. 首先,从https://visualstudiogallery.msdn.microsoft.com/d3a38f74-3490-42da-bdb0-37fa5acebc36下载免费版.NET Word类库并安装,然后创建一个C# 控制台应用程序,添加引用及命名空间并参考以下步骤. 步骤1:创建一个新的Document对象并加载Word文档.

C#向线程中传递多个参数的解决方法(两种)_C#教程

问题: 对于多线程编程,很多时候往往需要向线程中传递多个参数,而C#中的线程只接收1个object类型的参数(如下): Thread t = new Thread(new ParameterizedThreadStart(newthread)); t.start(参数); void newthread(object) { ............. } 而现在需要往线程中传递多个参数,比如method方法想用单独的线程来跑 void method(int begin,int end) { ...

Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)

背景: 现有 group (组)和 user (用户) 两种实例. 一个 group 中可以拥有多个 user,一个 user 也可以属于有多个 group (多对多关系) GroupUserRelation 表用于绑定组合组员的关系(使用id绑定) 字段有 id, group_id, user_id 现有User(用户)表, 需要获取 其所属的所有用户组的信息,需要使用hasMany()进行多表关联. User.id => GroupUserRelation.user_id GroupUser

PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)_php实例

方法一: 在php中,抓取https的网站,提示如下的错误内容: Warning: file_get_contents() [function.file-get-contents]: failed to open stream: Invalid argument in I:Webmyphpa.php on line 16 打开php.ini文件找到 ;extension=php_openssl.dll ,去掉双引号";" ,重启web服务器即可. apache服务器的话,可以同时启用m

jQuery Dialog 打开时自动聚焦的解决方法(两种方法)_jquery

下面给大家介绍两种方法解决jQuery Dialog 打开时自动聚焦问题.具体实现方法大家可以参考下本文. 方法一: p1_dialog_seniorSearch.dialog({ title:"高级查询", autoOpen:false,//默认关闭 modal: true,//开启遮罩层 width:570, height:330, buttons: { "查询":function(){ seniorSearch(1,20) } , "关闭"

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

本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

AngularJs中route的使用方法和配置_AngularJS

angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一.该强大的地方有很多,比如双向数据绑定,应用了后端的MVC模式到前端,自定义指令等. 既然是单页面应用,肯定离不开页面的切换.我们首先来说一下angular的路由. angular实现页面切换时用了route. <script src="js/plugins/angular/angular.min.js"></script> <script src="js/p

JavaScript正则表达式验证身份证号码是否合法(两种方法)_正则表达式

第一种方法: 在用户注册页面有些需求要求的比较严格,需要对身份证js验证是否合法,通过此功能严格此系统软件,从而过滤到很多水客.下面就此实现方法给大家讲解下. 很多时候我们都是通过一组正则表达式来判断用户输入的身份证是否合法,那在用正则表达式判断之前,你对身份证号的组成有多少了解呢?下面来说说一个身份证号里面包含了多少的信息: 1.号码的结构 公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成.排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码.