使用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. git使用笔记-日志

    1.查看函数的历史修改 git log -L :git_deflate_bound:zlib.c2.查看HEAD的所有记录 git reflog $ git reflog 1a410ef HEAD@{ ...

  2. [OpenStack] [Liberty] Neutron单网卡桥接模式访问外网

    环境配置: * Exsi一台 * Exsi创建的单网卡虚拟机一台 * Ubuntu 14LTS 64位操作系统 * OpenStack Liberty版本 * 使用Neutron网络而非Nova网络 ...

  3. 基于Python实现邮件发送

    import smtplibfrom email.mime.text import MIMETextemail_host = 'smtp.163.com' # 邮箱地址email_user = 'sz ...

  4. ubuntu14.04通过 gvm 安装 go语言开发环境

    最近用回了ubuntu ,所以打算安装golang学习当下比较火热的这个语言 本来打算使用 sudo apt-get install golang的 安装后发现 是1．2．1不是最新版 所以上网上搜了 ...

  5. Spring Boot实战(3) Spring高级话题

    1. Spring Aware Spring的依赖注入的最大亮点就是你所有的Bean对Spring容器的存在是没有意识的.即你可以将你的容器替换成别的容器. 实际项目中,不可避免地会用到Spring容 ...

  6. ASP.NET MVC扩展自定义视图引擎支持多模板&动态换肤skins机制

    ASP.NET mvc的razor视图引擎是一个非常好的.NET MVC框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的项目支 ...

  7. C#语言开发规范

    1.  命名规范 a) 类 [规则1-1]使用Pascal规则命名类名,即首字母要大写. eg: Class Test { ... } [规则1-2]使用能够反映类功能的名词或名词短语命名类. [规则 ...

  8. vue将数据绑定到属性中

    *必须使用[] <tr v-for="(p,index) in prodects"> @*v-bind:class="styleType(index)&quo ...

  9. C# 解决 邮件发送Excel附件后，excel处于锁定状态

    当使用c#自带的MailMessage类发送excel附件时,再次打开excel会提示处于锁定状态. 解决思路:Attachment是添加附件的类,邮件发送后没有释放该类 public string ...

  10. Hibernate课程 初探一对多映射3-4 双向多对一的测试

    1 单向多对一和单向多对一的区别 比如部门和员工,一个部门下有很多员工,如果只查一个员工属于哪个部门,就用单向的,如果还要查一个部门下的所有员工,就用双向的. 2 双向多对一的配置 除了单向xml和双 ...