使用Angular实现了一个简单的登录注册的功能........

涉及到的Angular知识点很少 主要是这个功能的实现...(*^__^*) 嘻嘻……

里面涉及到的知识点记录:

1.本地存储的操作 localStorage

获取本地存储的值 window.localStorage.getItem(key)-->value   (得到的数据是字符串"[ { "name": "andim", 'pwd': '123' } ]" )

设置本地存储的值 window.localStorage.setItem(key,value)

操作:

将取出来的数据(字符串)转化为数组-->然后插入(push)新的值-->再转化为字符串-->再存到本地存储中

方法 :JSON.parse( storage )-->storage.push( this )-->JSON.stringify( storage )-->window.localStorage.setItem(...)

  • JSON.parse(  )      将 json 格式的字符串, 转换成 对象
  • JSON.stringifly( )  将一个 对象 转换成一个 JSON 格式的字符串

    JSON 格式已经是 网络传输中使用的核心数据格式:
    1. 对象的形式: '{ "key": value, "key": value, ... }'
    2. 数组形式: '[ jsonObj, jsonObj, ... ]'

2.数组中的some()方法

遍历数组,遇到符合条件的就停止遍历,有符合就返回true,反之返回flase

数组.some(function(数组v){

return 条件

})

1 storage.some(function ( v ) {
2
3     return v.name === name;
4
5 //strorage中name的值和输入的值相等,返回true 返之返回false
6
7 });

附上源代码.......

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         .red {
  8             color: red;
  9         }
 10     </style>
 11 </head>
 12 <body ng-app="ZhuCeApp">
 13     <!-- ZhuCeCtrl -->
 14     <!-- View -->
 15     <div ng-controller="ZhuCeController">
 16         用 户 名: <input type="text" ng-model="name"><br />
 17         密&nbsp;&nbsp;码: <input type="text" ng-model="pwd"><br />
 18         确认密码: <input type="text" ng-model="pwd2"><br />
 19         <input type="button" value="注册" ng-click="ZhuCe()">
 20         <span class="red">{{message}}</span>
 21     </div>
 22
 23 </body>
 24 <script src="./angular.js"></script>
 25 <script>
 26     // Model
 27     function PersonInfo ( name, pwd ) {
 28         this.name = name;
 29         this.pwd = pwd;
 30     }
 31
 32     PersonInfo.prototype.saveToLocalStorage = function () {
 33         // 将 this 写入 本地存储
 34         // 先将以前的数据取出来, 然后在合并到数据中, 再写一会去
 35         var storage = window.localStorage.getItem( 'PersonInfo' ); // 第一次 没有数据  undefiend
 36                                                                    // 第二次 "[ { "name": "andim", 'pwd': '123' } ]"
 37
 38         storage = storage ? JSON.parse( storage ) : [];  // 第一次 storage 是 []
 39                                                          // 第二次 storage 是 [ { "name": "andim", 'pwd': '123' } ]
 40
 41         storage.push( this );  // 第一次 [ { "name": "andim", 'pwd': '123' } ]
 42                                // 第二次  [ { "name": "andim", 'pwd': '123' }, { "name": "zhangsan", "pwd": "123456" } ]
 43
 44         window.localStorage.setItem( 'PersonInfo', JSON.stringify( storage ) );
 45     }
 46
 47      //检测是否有重名
 48     PersonInfo.selectByName = function ( name ) {
 49         var storage = window.localStorage.getItem( 'PersonInfo' );
 50         storage = storage ? JSON.parse( storage ) : [];
 51
 52         return storage.some(function ( v ) {
 53             return v.name === name;
 54         });
 55     }
 56
 57     // Controller
 58     angular.module( 'ZhuCeApp', [] )
 59         .controller( 'ZhuCeController', function ( $scope ) {
 60
 61             // 处理逻辑
 62             $scope.ZhuCe = function () {
 63                 $scope.message = '';
 64
 65                 // 1 需要验证用户的输入
 66                 var name = $scope.name,
 67                     pwd = $scope.pwd,
 68                     pwd2 = $scope.pwd2;
 69
 70                 if ( name === undefined || name.trim().length === 0 ||
 71                      pwd === undefined || pwd.trim().length === 0 ||
 72                      pwd2 === undefined || pwd2.trim().length === 0 ) {
 73                     $scope.message = '请输入完整信息';
 74                     return;
 75                 }
 76
 77
 78                 // 2 如果输入了内容验证密码输入是否一致
 79                 if ( pwd !== pwd2 ) {
 80                     $scope.message = '两次密码输入不一致';
 81                     return;
 82                 }
 83
 84                 // 判断 名字是否已被使用
 85                 if ( PersonInfo.selectByName( name ) ) {
 86                     $scope.message = '该用户已存在....';
 87                     return;
 88                 }
 89
 90
 91                 // 3 写入数据库( localStorage )
 92                 var data = new PersonInfo( name, pwd );
 93
 94                 // 写到 本地存储中
 95                 data.saveToLocalStorage();
 96                 $scope.name = $scope.pwd = $scope.pwd2 = '';
 97             }
 98         });
 99 </script>
100 </html>

View Code

很简陋的方法...勿见笑>>>>

转载于:https://www.cnblogs.com/xiaoyun1121/p/6044815.html

Angular之简单的登录注册相关推荐

  1. python做一个登录注册界面_Python 实现简单的登录注册界面

    Python 实现简单的登录注册界面 注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...

  2. 一个简单的登录注册网页的实现

    一个简单的登录注册网页的实现 通过 标签让标签内的内容居中显示,再通过标签中的method属性来设置请求方式为post(一般涉及密码等机密数据都用post请求):再通过action来设置请求地址.这其 ...

  3. android如何实现用户注册功能,Android 实现简单的登录注册功能（SharedPreferences和SQLite）...

    最近恰好作了一个Android的登陆注册界面,将数据利用SharedPreferences或者SQLite绑定到Android程序中,实现简单的登录注册功能,本文未涉及到与服务器的交流.java 首先 ...

  4. 使用JSP实现简单的登录注册功能，并且使用Session跟踪用户登录信息

    使用JSP实现简单的登录注册功能,并且使用了Session来跟踪用户的登录信息,这个是用纯JSP来实现此功能的,由于没有连接数据库,所以使用List来模拟数据库. 第一步:创建web项目 如果有不会创 ...

  5. Java Swing 简单的登录注册窗口

    前言 最近在学习Java Swing 写了一个简单的登录注册窗口, 该项目包含了对JFrame的创建,和一些组件的练习并且加入了简单的事件监听和简单的用户名密码判断. 登录和注册的页面只画出来了没有进 ...

  6. 小白教程——Windows下用PHP写一个简单的登录注册页面（二）

    哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...

  7. 基于android校园订餐APP，简单实现登录注册功能（SharedPreferences）

    基于android校园订餐APP,简单实现登录注册功能(SharedPreferences) 欢迎浏览本篇文章 界面效果图 页面设计代码 源代码 欢迎浏览本篇文章 大家好! 这是小编首次在博客上写的文 ...

  8. Java实现简单的登录注册功能

    登录注册在项目开发中是常用的功能需求,以下使用控制台实现一个简单的登录注册功能. 实体类: package com.csdn.entry;public class User {//实体类,对应一个表p ...

  9. SpringCloud一代组件+nginx实现简单的登录注册

    SpringCloud一代组件+Nginx实现简单的登录注册 1.要求 2.实现步骤 1. 首先将项目骨架创建出来 2.然后将每个功能对应的子项目创建出来 3.导入对应的数据库和配置全局配置 4.配置 ...

最新文章

  1. python最高版本-Python学习路线图（2020年最新版）
  2. centos7 安装mysql php,Centos7安装mysql与php的方法
  3. 分布式消息系统Kafka初步
  4. 打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
  5. oracle语法和sql的区别吗,ORACLE和SQL语法区别归纳
  6. 【图像分割】基于matlab GUI阙值+边缘检测+区域法图像分割【含Matlab源码 817期】
  7. 思达报表工具Style Report基础教程—通过镜像，子表和联合将逗号分隔的字段内容处理成多行数据...
  8. T400 系统安装过程
  9. 第一讲 OC简介及基本语法
  10. 网页视频倍速播放代码
  11. QtXlsx第三方库在Mac OS和Windows下的配置及简单使用
  12. 使用css定位--让foot层始终保持在页面底部
  13. DSm安装mysql_黑群辉DSM6.17安装图文教程 - 诗风个人博客
  14. 武汉理工大学计算机学院在哪个区,武汉理工大学研究生院在哪个校区
  15. fluid 如何获取特定层的参数
  16. RK3399PRO-RKNN_DEMO模块开发最新资料下载
  17. caspase家族的特点_caspase家族
  18. 利用GitHub制作免费个人主页
  19. 客户满意度测评模型-层次分析法模型」
  20. java系统学习_java全面系统学习路线（转载）

热门文章

  1. 使用NSOperation为你的app加速
  2. Informix IDS 11零碎治理(918考试)认证指南,第 7 部分: IDS复制(24)
  3. 关于C#序列化结果的长度获取
  4. 高性能、高可靠分布式文件系统 go-fastdfs v1.2.0 发布
  5. jQuery---过滤选择器
  6. [CareerCup] 4.7 Lowest Common Ancestor of a Binary Search Tree 二叉树的最小共同父节点
  7. jsp 中包含 一个路径为变量的文件
  8. 第九周项目6-穷举法之年龄几何
  9. 被遮挡的绝对定位 z-index
  10. JAVA中toString方法的作用(转)