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


Posted in Javascript onNovember 25, 2016

本文给大家分享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验证重复密码的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 #Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 #Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 #Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 #Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 #Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 #Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 #Javascript
You might like
php skymvc 一款轻量、简单的php
2011/06/28 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python写的一个简单监控系统
2015/06/19 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
主题教育活动总结
2014/05/05 职场文书
股份转让协议书范本
2015/01/27 职场文书
个人维稳承诺书
2015/05/04 职场文书
高三物理教学反思
2016/02/20 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python