学习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. COGS——T 7. 通信线路

    http://www.cogs.pro/cogs/problem/problem.php?pid=7 ★★   输入文件:mcst.in   输出文件:mcst.out   简单对比时间限制:1.5 ...

  2. 关于bootstrap IE8的兼容性问题

    非常久没有写技术类的文章了.这几天在用bootstrap来做我们站点的UI框架,感觉还是不错的.只是遇到一点不大不小的问题,那就是有朋友在IE8下訪问我们的站点.界面变成了跟手机浏览一样的界面. 后来 ...

  3. Oracle-02-数据库概述

    一.数据库用途 用于存放数据的软件 当中Application server重要,将数据存在表中每一个表关系就能够反映不同表之间数据的关系,比方淘宝用户注冊.商品买卖等数据存在操作系统的目录中,不便于 ...

  4. USACO milk

    /* ID:kevin_s1 PROG:milk LANG:C++ */ #include <iostream> #include <string> #include < ...

  5. vim 基础学习之global

    global命令可以在指定模式下,匹配行上进行Ex命令 使用格式: :[range]g[lobal]/{pattern}/[cmd] range-是执行范围(如果缺省,是%) global-命令关键字 ...

  6. 74.QT窗口实现类的封装

    #include "mainwindow.h" #include <QApplication> #include <windows.h> //定义一个窗口类 ...

  7. ajax模仿iframe

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. python +uiautomator 安卓UI控件操作

    一.搭建环境 准备:win7.JDK.androidSDK(adt-bundle-windows-x86_64-20140702\sdk).Appium.安卓模拟器(真机也可以),可以到这个地址下载h ...

  9. 【习题 8-4 UVA - 11491】Erasing and Winning

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑删掉第i位. 则第i+1位就会取代第i位. 则肯定第i+1位比第i位大的话,才比较好. 则从小到大贪心删,找到第一个a[i+1] ...

  10. Windows学习总结（5）——【IIS建站】Windows10怎么打开站点服务？

    从Windows8开始,界面发生了很大的变动,再到Windows10,仍然有不小的变动,鉴于以后Windows10会成为主流,我们姑且介绍下Windows10建站的方法,虽然它并不是专业的服务器系统, ...