使用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. pat1048. Find Coins (25)

    1048. Find Coins (25) 时间限制 50 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Eva loves t ...

  2. HDU 5418——Victor and World——————【状态压缩+floyd】

    Victor and World Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/131072 K (Java/Other ...

  3. C#继承 多态

    1.继承 允许我们根据一个类来定义另一个类.已有的类被称为的基类(父类),新的类被称为派生类(子类). 单一继承:只能有一个基类,一个基类可以派生出多个派生类,一个类别只可以继承自一个父类. 多重继承 ...

  4. SpringMVC 的初始化参数绑定

    初始化参数绑定:日期格式 一:首先我们先做一种日期格式的绑定,配置初始化参数绑定和自定义类型转换有着异曲同工之妙 配置步骤如下: 1.我们首先配置applicationContext.xml,进行扫描 ...

  5. UrShop 商城系统介绍

    UrShop能够帮助企业快速构建个性.高效.稳定.安全的网上商城并减少二次开发带来的成本.对于网店来说,UrShop除了安装便捷,功能上强大以外,操作上也非常方便快捷.优社电商秉承设身处地为客户着想的 ...

  6. js的垃圾收集机制以及写代码如何处理

    程序都自己的内存,一旦内存过多就会清楚以前的缓存.所以,在写代码的时候,不要仅仅只会推变量到栈中,还要会将变量从栈中释放. 那么问题来了,我们应该如何将内存从栈中释放呢? 要释放变量,那就要从java ...

  7. CSS知识点梳理

  8. 微信小程序电商实战-入门篇

    小程序开发工具有新版本更新啦!开发体验更好了,详情可以查看微信公众平台-小程序https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.h ...

  9. Windows环境下搭建Linux虚拟机

    下载VMware workstation 和 CentOs 或者 redHat .Ubuntu

  10. Oracle数据表比较记录差异（转）

    liuyx_know|七级 你可以参照一下Oracle的UNION [ALL], INTERSECT, MINUS操作符,至于你的问题你可以使用MINUS操作符,语句如下: SELECT * FROM ...