学习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. 【Uva 10817】Headmaster's Headache

    [Link]: [Description] 一个学校,有s门课程(1<=s <=8),里面本身已经有m个老师了,然后还想招聘n个老师: 给出这m个老师和n个来应聘的老师的信息; (c[i] ...

  2. Python 查找Twitter中特定话题中最流行的10个转发Tweet

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-7-4 @author: guaguastd @name: fi ...

  3. android 获取蓝牙已连接设备

    蓝牙如果手动配对并已连接,获取连接的设备: 1.检测连接状态: int a2dp = bluetoothAdapter.getProfileConnectionState(BluetoothProfi ...

  4. js中常用的对象—Array的属性和方法

    今天说一下,js中常用的内置对象——Array对象 Array常用属性: length prototype :给系统对象添加属性和方法 Array常用方法: Array.prototype.sum = ...

  5. 如何使iframe外部的超级链接的页面在iframe中打开

    如何使iframe外部的超级链接的页面在iframe中打开,有以下两种方法: 一.html方法: <iframe name="a1"></iframe> & ...

  6. 使用Redis配置JAVA_环境

    配置环境变量 1.安装完成后,右击"我的电脑",点击"属性",选择"高级系统设置": 2.选择"高级"选项卡,点击&qu ...

  7. 【习题 8-7 UVA - 11925】Generating Permutations

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 让你把排列1..n变换成对应的输入序列. 每次可以交换前两个数字,或者把第一个数字放到末尾去. 可以逆向考虑. 即把无序的序列变换成 ...

  8. 洛谷 P2242 公路维修问题

    P2242 公路维修问题 题目描述 由于长期没有得到维修,A国的高速公路上出现了N个坑.为了尽快填补好这N个坑,A国决定对M处地段采取交通管制.为了求解方便,假设A国的高速公路只有一条,而且是笔直的. ...

  9. lighttpd启动不了，libssl.so.4&amp;libcrypto.so.4 缺失

    lighttd的出错日志在 log/out_lighttpd 里,当lighttd启动不了时候,这里文件中会说明原因. 今天的报错是 error while loading shared librar ...

  10. Cisco安全防护读书笔记之一Cisco系统设备协议漏洞

    650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=" ...