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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
深入Node TCP模块的理解
Mar 13 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
js验证密码强度解析
Mar 18 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和.net中des加解密的实现方法
2013/02/27 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
python实现录音小程序
2020/10/26 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python tkinter实现屏保程序
2019/07/30 Python
pygame实现打字游戏
2021/02/19 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
排查整治工作方案
2014/06/09 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
国情备忘录观后感
2015/06/04 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
原生JS实现分页
2022/04/19 Javascript