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 相关文章推荐
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
cookie的secure属性详解
Apr 08 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
学习ExtJS Column布局
2009/10/08 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
JavaScript 原型继承
2011/12/26 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
vue监听scroll的坑的解决方法
2017/09/07 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
vue实现购物车小案例
2019/09/27 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
Python实现基于POS算法的区块链
2018/08/07 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
python pandas时序处理相关功能详解
2019/07/03 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
竞聘上岗演讲稿范文
2014/01/10 职场文书
导购员的岗位职责
2014/02/08 职场文书
搞笑征婚广告词
2014/03/17 职场文书
学校教师安全责任书
2014/07/23 职场文书
运动会入场词
2015/07/18 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers