Angularjs修改密码的实例代码


Posted in Javascript onMay 26, 2017

修改密码逻辑思维

首先要输入旧的密码,判断旧的密码是否正确(后台判断)

其次输入新的密码,判断新密码格式(可增加)

最后判断新密码和确认密码输入是否一致

html部分

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label class="col-sm-2 control-label"><i class="importance">*</i>当前密码</label>
  <div class="col-sm-6">
   <input type="text" class="form-control" ng-model="user.password">
  </div>
 </div>
 <div class="form-group">
  <label class="col-sm-2 control-label"><i class="importance">*</i>新密码</label>
  <div class="col-sm-6">
   <input type="text" class="form-control" ng-model="user.newPassword" ng-minlength="8" ng-maxlength="16" required>
  </div>
 </div>
 <div class="form-group">
  <label class="col-sm-2 control-label"><i class="importance">*</i>确认新密码</label>
  <div class="col-sm-6">
   <input type="text" class="form-control" ng-model="password_again">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-default x_submit" ng-click="changePassword()">保存设置</button>
  </div>
 </div>
</form>

AngularJS部分

.controller('userpswdCtrl', function($scope,Account,SweetAlert,$state,$localStorage){
 $scope.user = {}; //信息全部存在user里面
 $scope.changePassword = function(){
  if($scope.password_again === $scope.user.newPassword){  //如果两次密码输入一致
    $scope.user.accountId = $localStorage.accountId;   //获取用户id
    Account.modifyPassword($scope.user,function(data){  //修改密码
     console.log(data);
     SweetAlert.swal({
      title:'',
      text: "修改成功",
      type: "success",
      showCancelButton: false,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "是",
      cancelButtonText: "否",
      closeOnConfirm: true,
      closeOnCancel: true
     })
    },function(){

    })
  }
 }
})

以上所述是小编给大家介绍的Angularjs修改密码的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
vue组件中的数据传递方法
May 14 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
vue实现图书管理系统
Dec 29 Vue.js
详解vue.js的devtools安装
May 26 #Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 #Javascript
vue.js获取数据库数据实例代码
May 26 #Javascript
详解通过JSON数据使用VUE.JS
May 26 #Javascript
JS中去掉array中重复元素的方法
May 26 #Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 #Javascript
AngularJS表单验证功能分析
May 26 #Javascript
You might like
PHP安全编程之加密功能
2006/10/09 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
python聊天程序实例代码分享
2013/11/18 Python
python虚拟环境迁移方法
2019/01/03 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
opencv python如何实现图像二值化
2020/02/03 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
给学校的建议书
2014/03/12 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
会计求职信怎么写
2015/03/20 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
律政俏佳人观后感
2015/06/09 职场文书
课程设计感想范文
2015/08/11 职场文书
文艺委员竞选稿
2015/11/19 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
工作自我评价范文
2019/03/21 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
图文详解nginx日志切割的实现
2022/01/18 Servers
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis