AngularJS前端页面操作之用户修改密码功能示例

本文实例讲述了AngularJS前端页面操作之用户修改密码功能。分享给大家供大家参考，具体如下：

最近在做前端设计，主要使用的知识有AngularJS和nodejs来进行页面显示和数据请求、处理等工作。在设计页面比如忘记密码时，发现一个有效的设计思路是很重要的。

就以修改密码为例，要将提示信息友好的展示给用户，明确告诉用户在操作的过程中那部分有问题，这需要定义详细的变量以及能在页面的不同位置显示信息。下面的代码是自己写的一个简单例子，记录学习进程。

changePwd

var app = angular.module("myapp",[]);
app.controller('changPwdCtrl',function($scope){
  $scope.name = "xiaozhang";
  $scope.pwd = "hello";
  $scope.newPwd = "hello1";
  $scope.rNewPwd = "hello2";
  $scope.submit = function (){
    $scope.reseltNotRule = '';
    $scope.resultNotSame = '';
    $scope.result = '';
    $scope.resultSuccess = '';
    if(!($scope.name&&$scope.pwd&&$scope.newPwd&&$scope.rNewPwd)){
      $scope.result = "请填写完整";
    }else if ($scope.newPwd != $scope.rNewPwd) {
      $scope.resultNotSame = "两次密码不一致";
    }else if ($scope.pwd == $scope.newPwd) {
      $scope.result = "新旧密码不能一致";
    }
  }
});

之后具体的显示信息可以在具体化，基本思路是利用angular的 双向数据绑定来进行数据分析，从而显示不同的信息。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

赞 (0)

相关推荐

  • 利用Angularjs和bootstrap实现购物车功能

    利用Angularjs和bootstrap实现购物车功能

    先来看看效果图: 购物车 一.代码 如果看了这个效果有兴趣想知道怎么做出来的话,那就继续往下看吧.话不多少,直接上代码. html代码: <!DOCTYPE html> <html lang="en" ng-app="cart"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="style

  • AngularJS实现数据列表的增加、删除和上移下移等功能实例

    AngularJS实现数据列表的增加、删除和上移下移等功能实例

    效果图 实例代码 <!DOCTYPE html> <html lang="en" ng-app="myapp" ng-controller="myCtrl"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0; list-style:

  • angularjs 实现带查找筛选功能的select下拉框实例

    angularjs 实现带查找筛选功能的select下拉框实例

    一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析:    目标 在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的sele

  • Angularjs 制作购物车功能实例代码

    Angularjs 制作购物车功能实例代码

    初学angularJS   闲暇之余做了个小案例. 功能:计算购物车商品的价格,以及删除购物车商品. 以下是完整案例(jQuery和angularjs需要自己引入) <!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .cursors{curs

  • Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能

    Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能

    最终实现效果: index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animat

  • AngularJS 最常用的八种功能(基础知识)

    AngularJS 使用基础知识 第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 <ul> <li ng-repeat="person in persons"> {{person.name}} is {{person.age}} years old. </li> </ul> 你甚至可以指定输出的顺序: <li ng-repeat="person in pers

  • Ionic+AngularJS实现登录和注册带验证功能

    Ionic+AngularJS实现登录和注册带验证功能

    登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li

  • AngularJS中实现用户访问的身份认证和表单验证功能

    AngularJS中实现用户访问的身份认证和表单验证功能

    身份验证 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限.     一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们

  • AngularJS前端页面操作之用户修改密码功能示例

    本文实例讲述了AngularJS前端页面操作之用户修改密码功能.分享给大家供大家参考,具体如下: 最近在做前端设计,主要使用的知识有AngularJS和nodejs来进行页面显示和数据请求.处理等工作.在设计页面比如忘记密码时,发现一个有效的设计思路是很重要的. 就以修改密码为例,要将提示信息友好的展示给用户,明确告诉用户在操作的过程中那部分有问题,这需要定义详细的变量以及能在页面的不同位置显示信息.下面的代码是自己写的一个简单例子,记录学习进程. changePwd var app = ang

  • laravel的用户修改密码与绑定邮箱的详细操作

    laravel的用户修改密码与绑定邮箱的详细操作

    目录 一.修改密码 1.1 创建修改密码控制器 1.2 创建修改密码路由 1.3 测试效果 二.绑定邮箱 2.1 绑定邮箱控制器 2.2 创建对应路由 2.3 创建发送邮件的类 2.4 测试效果 一.修改密码 1.1 创建修改密码控制器 运行命令php artisan make:controller Auth/PasswordController 写入修改密码方法: /** * 修改密码 */ public function updatePassword(Request $request) {

  • Oracle 11g用户修改密码及加锁解锁功能实例代码

    1.运行 cmd.exe: 2.输入 sqlplus / as sysdba,以系统管理员(sysdba)身份连接数据库,进行数据库管理操作. 3.连接成功后执行 alter user identityName identified by password; -–修改密码 alter user identityName account unlock; -–解锁 alter user identityName account lock; -–加锁 identityName:需要修改的用户: pas

  • 前端vue+elementUI如何实现记住密码功能

    我们这回使用纯前端保存密码 既然是记住密码,前端也就是使用cookie保存,访问时用cookie读取 先来了解下cookie的基本使用吧 Cookie 所有的cookie信息都在document.cookie中存放着,是一个字符串,里面的cookie以分号和空格分隔.就像这样: "key1=value1; key2=value2; key3=value3" // 使用document.cookie 来获取所有cookie docuemnt.cookie = "id="

  • Django通用类视图实现忘记密码重置密码功能示例

    前言 在Django中有大量的通用类视图,例如ListView,DetailView,CreateView,UpdateView等等,将所有重复的增删改查代码抽象成一个通用类,只需要配置极少量的代码即可实现功能. 使用通用类视图完成找回密码功能 首先引入 from django.contrib.auth.views import PasswordResetView, PasswordResetConfirmView, \ PasswordResetDoneView, PasswordChange

  • Vue 两个字段联合校验之修改密码功能的实现

    Vue 两个字段联合校验之修改密码功能的实现

    目录 1.前言 2.方案实现 2.1.实现代码 2.2.代码说明 2.3.校验效果 1.前言   本文是前文<Vue Element-ui表单校验规则,你掌握了哪些?>针对多字段联合校验的典型应用.   在修改密码时,一般需要确认两次密码一致,涉及2个属性字段.类似的涉及2个属性字段的情况有: 日期时间范围,如果两者都有值,则要求:结束时间>=开始时间. 数量关系:数量下限<=数量上限.   特点是两个属性值都是可变的.本文以校验两次密码的一致性应用,给出两个可变属性值的字段之间的

  • Python实现在线暴力破解邮箱账号密码功能示例【测试可用】

    本文实例讲述了Python实现在线暴力破解邮箱账号密码功能.分享给大家供大家参考,具体如下: dic 字典格式如下(mail.txt) : username@gmail.com:password username@gmail.com:password username@gmail.com:password 以此类推,切记保存成utf-8编码格式. 放置在当前脚本目录,也可自己定义修改. 支持ssl https /imap协议. # version 3.4.0 # coding='UTF-8' #

  • Python使用装饰器模拟用户登陆验证功能示例

    Python使用装饰器模拟用户登陆验证功能示例

    本文实例讲述了Python使用装饰器模拟用户登陆验证功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #!python3 user_list = [ {'name':'ad1','passwd':'123'}, {'name':'ad2','passwd':'123'}, {'name':'ad3','passwd':'123'}, {'name':'ad4','passwd':'123'} ] #初始状态,用来保存登陆的用户, client_dic = {'

  • JS实现密码框的显示密码和隐藏密码功能示例

    JS实现密码框的显示密码和隐藏密码功能示例

    本文实例讲述了JS实现密码框的显示密码和隐藏密码功能.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <form method="POST" action="

  • Android基于AlarmManager实现用户在线心跳功能示例

    本文实例讲述了Android基于AlarmManager实现用户在线心跳功能.分享给大家供大家参考,具体如下: 在做即时通信或者其他检测是否在线等操作时要用到心跳.比较常用的是AlarmManager全局定时器 去实现. AlarmManager的使用机制有的称呼为全局定时器,有的称呼为闹钟.其实它的作用和Timer有点相似.都有两种相似的用法:(1)在指定时长后执行某项操作(2)周期性的执行某项操作 AlarmManager对象配合Intent使用,可以定时的开启一个Activity,发送一个

随机推荐