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 相关文章推荐
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
Javascript 面试题随笔
Mar 31 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
详解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 curl 抓取AJAX异步内容示例
2014/09/09 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
Jquery Ajax请求代码(2)
2011/01/07 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
javascript中的隐式调用
2018/02/10 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
python 将字符串转换成字典dict
2013/03/24 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
django主动抛出403异常的方法详解
2019/01/04 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
上课说话检讨书大全
2014/01/22 职场文书
运动会广播稿400字
2014/01/25 职场文书
教师自我剖析材料
2014/09/29 职场文书
社区节水倡议书
2015/04/29 职场文书
聘任通知书
2015/09/21 职场文书