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 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 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遍历XML文档所有节点的方法
2015/03/12 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP自定义多进制的方法
2016/11/03 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
python的mysqldb安装步骤详解
2017/08/14 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
应届生护士求职信
2013/11/01 职场文书
出纳岗位职责模板
2013/11/27 职场文书
监察建议书格式
2014/05/19 职场文书
庆国庆活动总结
2014/08/28 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
小人国观后感
2015/06/11 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android