学习js的过程中，根据知识点编写一些code进行测试，以便检验。

这段程序使用了以下知识点:

1.regexp，对数据进行模式匹配

2.使用location对象进行页面跳转。

3.cookie/localstorage等本地存储的使用

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

<span id="span1"></span><br/>

<label for="inp1" id="label1">

    用户名：<input id="inp1" type="text" placeholder="username">

</label>

<br/>

<label for="inp2" id="label2">

    密码：<input id="inp2" type="password" placeholder="password">

</label>

<br/>

<button id="btn1" onclick="jData()">submit</button>

<script type="text/javascript">

    var span1=document.getElementById("span1");

    var inp1=document.getElementById("inp1");

    var inp2=document.getElementById("inp2");

    function jData(id){

        //校验用户姓名：只能输入1-30个以字母开头的字串

        var patt1=new RegExp(/^[a-z][a-zA-Z0-9_-]{0,29}/,"g");

        //校验密码：只能输入6-20个字母、数字、下划线

        var patt2=new RegExp(/[a-zA-Z0-9_]{6,20}/,"g");

        var res=patt1.test(inp1.value)&&patt2.test(inp2.value);

        if(res){

//           window.location.href="http://www.baidu.com";

            window.location.assign("http://www.baidu.com");

//           window.event.returnValue = false;

        }else{

            span1.innerHTML="username or password wrong";

        }

    }

</script>

</body>

</html>

1.正则表达式(参考，http://w3school.com.cn/jsref/jsref_obj_regexp.asp)

1）应用场景

对指定内容进行模式匹配，通过模式匹配查找、替换、删除、修改对应的内容或进行提交验证

2）语法。

a.[]和元数据

1)[字符]     理解为对方括号具体内容匹配

2）. , \w ,\d,  理解为对某一类进行通配

b.量词

n+;至少一次(一次及以上)

n*;任意次

n?;0次或1次

n{};这种指定具体次数：n{x};x次

n{x,y}次数在x~y之间即可

n{x,}至少x次(x次及以上)

^n;以n为开头

n$;以n结尾

3）实例。

3-1）为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义

<script>

    function escapeHtml(str){

        return str.replace(/[<>"&]/g, function (match) {

            switch (match){

                case "<":

                    return "&lt;";

                case ">":

                    return "&gt;";

                case '\"':

                    return "&quot;";

                case "&":

                    return "&amp;";

            }

        })

    }

    var str="<p>this is a  test &";

    console.log(escapeHtml(str));

    console.log(str);

</script>

3-2）提交验证。

regexp模式匹配+location页面跳转+cookie/localstorage本地存储的更多相关文章

  1. localStorage本地存储技术

    localStorage 本地存储技术 本地存储技术,“不是永久的永久存储” 特点: 将数据存储到浏览器当中 存储的数据都是以字符串的形式存储的 和传统的数据库相比: 优点: 操作简单,容易学习 数据 ...

  2. 关于cookie与本地 存储的区别的问题。

    关于cookie与本地 存储的区别的问题. 1. cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存. 2. coo ...

  3. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  4. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  5. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  6. (转载)HTML5 LocalStorage 本地存储

    原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...

  7. Localstorage本地存储兼容函数

    前言HTML5提供了本地存储的API:localstorage对象和sessionStorage对象,实现将数据存储到用户的电脑上.Web存储易于使用.支持大容量(但非无限量)数据同时存储,同时兼容当 ...

  8. HTML5 LocalStorage 本地存储（转）

    原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...

  9. localstorage本地存储的简单使用

    我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储. 1.localStorage.name="老王";      //第一种设置存储本地数据的方法loc ...

随机推荐

  1. win7安装python开发环境，执行python

    在win7上安装python的开发环境是很easy的事情 Step1:下载python安装文件 url:https://www.python.org/download 去这里找到你想要下载的文件 St ...

  2. json和XML

    发请求(url) 1.client  ---------------->服务端                发送数据(Json/xml)                      < - ...

  3. Zabbix + Grafana

    Grafana 简介 Grafana自身并不存储数据,数据从其它地方获取.需要配置数据源 Grafana支持从Zabbix中获取数据 Grafana优化了图形的展现,可以用来做监控大屏 Grafana ...

  4. Kinect 开发 —— 骨骼数据与彩色影像和深度影像的对齐

    在显示彩色影像和深度影像时最好使用WriteableBitmap对象: 要想将骨骼数据影像和深度影像,或者彩色影像叠加到一起,首先要确定深度影像的分辨率和大小,为了方便,这里将深度影像数据和彩色影像数 ...

  5. Codefroces B. New Skateboard

    B. New Skateboard time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  6. JavaScript笔记（2)

    -->变量的定义 1.取得并使用值是所有程序设计中的要点 2.JS中的变量是没有类型的,在JS中只有值才持有类型,变量所持有的是其对应值的类型. 3.变量的取名要符合标识符的规则: (1)一个J ...

  7. golang语言入门及安装

    golang语言入门及安装 go语言是google在2009年发布的开源编程语言使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进程. 本次讲解在windows上安装go语言的开 ...

  8. CMDB学习之一

    CMDB - 配置管理数据库 资产管理 自动化相关的平台(基础 CMDB): 1. 发布系统 2. 监控 3. 配管系统.装机 4. 堡垒机 CMDB的目的: 1. 替代EXCEL资产管理 —— 资产 ...

  9. 一个Web报表项目的性能分析和优化实践(七)：性能监测工具JavaMelody

    简介 JavaMelody 能够监测Java或Java EE应用程序服务器,并以图表的方式显示:Java内存和Java CPU使用情况,用户Session数量,JDBC连接数,和http请求.sql请 ...

  10. [AngularFire] Resolve snapshotChanges doesn't emit value when data is empty

    Updated to AngularFire2 v5.0. One important change is that you need to call .snapshotChanges() or .v ...