使用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. python3+Appium自动化13-H5元素定位实践案例

    测试场景 启动钉钉app进入工作H5页面,点击考勤签到 查看webview上元素 1.电脑上打开chrome浏览器输入:chrome://inspect/#devices 2.Discover USB ...

  2. ubuntu 16.04下搜狗输入法不能输入中文解决

    之前一段时间正常使用的搜狗输入法突然无法输出中文(具体现象是,可以呼出搜狗输入法界面,但是候选词列表无显示),解决之后记录下来,希望能为同样遇到这个问题的人提供参考.同时附linux下常见软件崩溃问题 ...

  3. http三次握手四次挥手

    最近一直忙于看前端vue相关内容,后端相关内容没有跟进,文章停了3周,,,哎,还是懒吧!子曰生命在于运动,该学习还是要学的,文章嘛也还是要整理滴,不扯了--- 参考: https://blog.csd ...

  4. mysql主从数据库错误处理

    方法一:忽略错误后,继续同步 该方法适用于主从库数据相差不大,或者要求数据可以不完全统一的情况,数据要求不严格的情况 解决: stop slave; #表示跳过一步错误,后面的数字可变set glob ...

  5. Java学习笔记--继承和多态(下)

    1.通过继承来开发超类(superclass) 2.使用super 关键词唤起超类的构造方法 3.在超类中覆盖方法 4.区分override和overload 5.在Object类中探索toStrin ...

  6. StreamWrite类

    FileStream类,该对象只能以字节形式读取/写入数据,这就使得操作非常困难. 一般有了FileStream对象,都会借用StreamWrite对象或StreamReader对象的方法来处理文件. ...

  7. 微信公众号自动回复_Java

    先声明一下,这是一个maven工程pom文件需要的依赖: <dependency> <groupId>dom4j</groupId> <artifactId& ...

  8. linux 封禁ip

    可以直接服务配置nginx.conf 添加 deny+IP 例如: 封禁单个IP deny 106.5.76.83; #封整个段即从123.0.0.1到123.255.255.254的命令deny 1 ...

  9. 【Android 界面效果47】RecyclerView详解

    RecylerView作为 support-library发布出来,这对开发者来说绝对是个好消息.因为可以在更低的Android版本上使用这个新视图.下面我们看如何获取 RecylerView.首先打 ...

  10. check_mk手动安装

    官方omd rpm包安装 yum -y install /tmp/check-mk-raw-1.2.6p2.demo-el6-34.x86_64.rpm omd create la omd confi ...