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 相关文章推荐
JavaScript中的类继承
Nov 25 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
微信小程序实现底部弹出框
Nov 18 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
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 set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
一个javascript参数的小问题
2008/03/02 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
美国创意之家:BulbHead
2017/07/12 全球购物
巴西在线鞋店:Shoestock
2017/10/28 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
工程专业毕业生自荐信范文
2013/12/25 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
地方课程教学计划
2015/01/19 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
mysql事务隔离级别详情
2021/10/24 MySQL
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python