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 相关文章推荐
Google Maps基础及实例解析
Aug 06 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
webpack实用小功能介绍
Jan 02 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 Javascript
javascript实现倒计时关闭广告
Feb 09 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
PHP引用的调用方法分析
2016/04/25 PHP
php生成mysql的数据字典
2016/07/07 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
护士自我评价
2014/02/01 职场文书
2015个人半年总结范文
2015/03/09 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
Elasticsearch 索引操作和增删改查
2022/04/19 Python