AngularJs如何验证重复密码
来源:互联网 发布:js中json对象转字符串 编辑:程序博客网 时间:2024/05/17 03:33
有两种方法。第一种:
<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)"/>
这样,加上第一个办法的判断,就可以完美地验证重复密码了。
1 0
- AngularJs如何验证重复密码
- angularjs表单注册--两次密码验证
- AngularJS验证两次密码是否相同
- 密码和确认密码一致的Angularjs验证
- Angularjs 表单验证3-密码、确认密码处理
- EXCEL如何验证重复数据?
- ExtJS4 如何实现密码验证
- php 如何验证密码复杂度?
- 在JSP中动态生成随机验证码,登录时后台校验验证码,以及如何避免同一个验证码被重复提交爆破密码
- angularjs验证
- angularjs如何避免快速点击按钮,重复提交请求
- jeecg如何做重复值验证
- 注册时重复密码验证和登录为空处理
- angularjs表单验证,包括密码长度及两次密码输入是否一致
- 如何验证输入密码的强弱度
- 如何实现ssh无密码验证
- 【指导】php 如何验证密码复杂度?
- AngularJS获取密码
- Google Samples MVP + RxJava 官方精简Demo
- leetcode题解分析_84. Largest Rectangle in Histogram
- Filter
- Two Sum
- 大数乘法
- AngularJs如何验证重复密码
- 关于printf()函数的总结
- 链表简单使用(打印、删除、增加元素)的几个注意事项
- PHP团队 编码规范 & 代码样式风格规范
- libreoffice 文档中插入表格-保存-打印
- 秒杀DX12!Vulkan 1.0规范正式发布
- 数据结构实验之链表九:双向链表
- Spring的事务关于配置到service和dao中的区别
- 在Ubuntu-14.04.3配置并成功编译Android6_r1源码