使用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 条件

})

 storage.some(function ( v ) {

     return v.name === name;

 //strorage中name的值和输入的值相等,返回true 返之返回false

 });

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .red {

             color: red;

         }

     </style>

 </head>

 <body ng-app="ZhuCeApp">

     <!-- ZhuCeCtrl -->

     <!-- View -->

     <div ng-controller="ZhuCeController">

         用 户 名: <input type="text" ng-model="name"><br />

         密&nbsp;&nbsp;码: <input type="text" ng-model="pwd"><br />

         确认密码: <input type="text" ng-model="pwd2"><br />

         <input type="button" value="注册" ng-click="ZhuCe()">

         <span class="red">{{message}}</span>

     </div>

 </body>

 <script src="./angular.js"></script>

 <script>

     // Model

     function PersonInfo ( name, pwd ) {

         this.name = name;

         this.pwd = pwd;

     } 

     PersonInfo.prototype.saveToLocalStorage = function () {

         // 将 this 写入 本地存储

         // 先将以前的数据取出来, 然后在合并到数据中, 再写一会去

         var storage = window.localStorage.getItem( 'PersonInfo' ); // 第一次 没有数据  undefiend

                                                                    // 第二次 "[ { "name": "andim", 'pwd': '123' } ]"

         storage = storage ? JSON.parse( storage ) : [];  // 第一次 storage 是 []

                                                          // 第二次 storage 是 [ { "name": "andim", 'pwd': '123' } ]

         storage.push( this );  // 第一次 [ { "name": "andim", 'pwd': '123' } ]

                                // 第二次  [ { "name": "andim", 'pwd': '123' }, { "name": "zhangsan", "pwd": "123456" } ]

         window.localStorage.setItem( 'PersonInfo', JSON.stringify( storage ) );

     }

      //检测是否有重名

     PersonInfo.selectByName = function ( name ) {

         var storage = window.localStorage.getItem( 'PersonInfo' );

         storage = storage ? JSON.parse( storage ) : [];

         return storage.some(function ( v ) {

             return v.name === name;

         });

     } 

     // Controller

     angular.module( 'ZhuCeApp', [] )

         .controller( 'ZhuCeController', function ( $scope ) {

             // 处理逻辑

             $scope.ZhuCe = function () {

                 $scope.message = '';

                 // 1 需要验证用户的输入

                 var name = $scope.name,

                     pwd = $scope.pwd,

                     pwd2 = $scope.pwd2;

                 if ( name === undefined || name.trim().length === 0 ||

                      pwd === undefined || pwd.trim().length === 0 ||

                      pwd2 === undefined || pwd2.trim().length === 0 ) {

                     $scope.message = '请输入完整信息';

                     return;

                 }

                 // 2 如果输入了内容验证密码输入是否一致

                 if ( pwd !== pwd2 ) {

                     $scope.message = '两次密码输入不一致';

                     return;

                 }

                 // 判断 名字是否已被使用

                 if ( PersonInfo.selectByName( name ) ) {

                     $scope.message = '该用户已存在....';

                     return;

                 }

                 // 3 写入数据库( localStorage )

                 var data = new PersonInfo( name, pwd );

                 // 写到 本地存储中

                 data.saveToLocalStorage();

                 $scope.name = $scope.pwd = $scope.pwd2 = '';

             }

         });

 </script>

 </html>

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

Angular之简单的登录注册的更多相关文章

  1. Python 实现简单的登录注册界面

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

  2. 7. Swift 基于Xmpp和openfire实现一个简单的登录注册

    1. 基本步骤:首先导入Xmpp框架,配置环境 ->由于我们使用的是OC的Xmpp框架,再进行Swift开发时需要进行桥接. 具体方法就是创建一个基于c的.h的头文件,然后将我们需要编译OC的语 ...

  3. node.js实现简单的登录注册页面

    首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en&qu ...

  4. spring boot1.1 idea + springboot + mybatis（mybatis-generator） +mysql +html实现简单的登录注册

    前言 这两年springboot比较火,而我平时的工作中不怎么使用spring boot,所以工作之余就自己写写项目练练手,也跟大家一起学习. 打算从最开始的搭架子,登录注册,到后台管理的增删改查,业 ...

  5. go语言实现一个简单的登录注册web小程序

    最近学习golang也有一段时间了,基础差不多学了个大概,因为本人是java程序员,所以对web更感兴趣.根据<go web编程>中的例子改编一个更简单的例子,供新手参考,废话不多说,上菜 ...

  6. Python简单的登录注册代码

    #-*- coding: utf-8 -*- import hashlib # 定义数据库(声明字典) #注册登录的简单hash处理 db={} def get_md5(password): md5= ...

  7. PHP 链接数据库1(连接数据库&简单的登录注册)

    对 解析变量的理解 数据库的名称和表的名称不能重复 从结果中取出的数据   都是以数组的形式取出的 1.PHP查询数据库中的某条信息 //PHP链接数据库 /*1.造链接对象 IP地址 用户名 密码 ...

  8. java web 简单的登录注册

    --sql文件 create database studentgouse studentgocreate table stuinfo(--stuid int primary key identity( ...

  9. 基于SSM框架实现简单的登录注册

    一.环境配置 工程目录 在pom.xml添加依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=& ...

随机推荐

  1. （转）mysql5.6.7多实例安装、配置的详细讲解分析及shell启动脚本的编写

    一.mysql安装 1.下载mysql数据库源码包: wget http://cdn.mysql.com/Downloads/MySQL-5.6/mysql-5.6.27.tar.gz 2.安装mys ...

  2. MongoDB + express + node + bootstrap 搭建多人博客

    这篇博客讲述如何搭建一个多人博客,需要一定的基础知识,用于思路整理和备忘. 第一步: 新建文件夹 blog ,结构如下: bin --- 可执行二进制文件,最终的启动接口. models --- 存储 ...

  3. Kudu1.1.0 、 Kudu1.2.0 Kudu1.3.0的版本信息异同比较

    不多说,直接上干货!  Kudu1.1.0 新特性 python API升级,具备JAVA C++client一样的功能(从0.3版本直接升级到1.1),主要的点如下: 1.1. 改进了Parial ...

  4. contiki源码阅读之mmem.c

    上次我们说了list,这次我们就借着mmem.c的代码来用一下这个链表. 代码目录是./core/lib/mmem.c 结构体定义如下 struct mmem { struct mmem *next; ...

  5. windows下curl的安装和简单使用

    curl是利用URL语法在命令行方式下工作的开源文件传输工具.它支持很多协议:FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE 以及 LDAP. 一 ...

  6. pop协议，邮件密码嗅探 使用说明

    思路与源代码 可以查看 https://www.cnblogs.com/likehc/p/10140174.html 因为软件用的是Wincap,所以 第一步安装下 WinPcap 第二步,打开 sn ...

  7. maven课程 项目管理利器-maven 1-2maven介绍和环境搭建

    maven简介: Maven是基于项目对象模型(POM),通过一小段描述信息来管理项目的构建.报告和文档的软件项目管理工具. 1.1 Maven安装文件夹的结构 bin 目录放置包含mvn的运行脚本 ...

  8. 在mac上使用github for mac 创建并上传项目

    1.下载github for mac https://mac.github.com/ 2.登陆 偏好设置 3.用Xcode 创建一个项目,勾上“create local git respository ...

  9. 《ArcGIS Runtime SDK for Android开发笔记》——（9）、空间数据的容器-地图MapView

    1.前言 在上一篇内容里介绍了 关于ArcGIS Android开发的未来(“Quartz”版Beta)相关内容,期间也提到了关于API接口的重构,开发思路的调整,根据2015UC资料也可以知道新版预 ...

  10. 服务器raid状态监控

    参考 http://hwraid.le-vert.net/wiki 查看raid芯片 lspci -v 02:00.0 SCSI storage controller: LSI Logic / Sym ...