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复选框全选/取消示例
Dec 30 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
详解Node.js如何处理ES6模块
May 15 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
PHP中的表达式简述
2016/05/29 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
工程负责人任命书
2014/06/06 职场文书
跑操口号
2014/06/12 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
放假通知范文
2015/04/14 职场文书
企业法人代表证明书
2015/06/18 职场文书
优秀创业计划书分享
2019/07/19 职场文书
Node.js实现断点续传
2021/06/23 Javascript
java泛型通配符详解
2021/07/25 Java/Android
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript