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实现的网站首页随机公告随机公告
Mar 14 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 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读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
PHP asXML()函数讲解
2019/02/03 PHP
input的focus方法使用
2010/03/13 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
深入理解js promise chain
2016/05/05 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
Javascript的比较汇总
2016/07/25 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
python实现自动更换ip的方法
2015/05/05 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
励志演讲稿500字
2014/08/21 职场文书
中职招生先进个人材料
2014/08/31 职场文书
生产操作工岗位职责
2014/09/16 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
pandas进行数据输入和输出的方法详解
2022/03/23 Python
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技