学习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. Django_模板HTML

  2. Cocos2d-x游戏的一般验证分析

    Coco2d-x引擎是相对于Unity3D的又一实力派引擎.尽管随着3D游戏的热门,很多其它的厂商偏向于Unity3D.可是Coco2d-x的普及量也不容小觑,特别是一些比較大的手游公司.比方触控科技 ...

  3. 如何实现对网站页面访问量的统计（javaweb和php）

    如何实现对网站页面访问量的统计(javaweb和php) 一.总结 一句话总结:其实很简单啦,每访问一次那个页面对应的index函数(控制器中的那个函数)访问次数就加1就可以了. 1.javaweb中 ...

  4. html5中的容器标签和文本标签

    html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...

  5. 3.常用Bracket插件

    转自:https://blog.csdn.net/iso_wsy/article/details/52608205 1.Emmet 如果你从事Web前端开发的话,对该插件一定不会陌生.它可以加快你的 ...

  6. 基于Linux平台的Openvas配置使用视频教学

    常见的漏洞扫描工具有Openvas.LSAT.Nessus.X-scan.ShadowSecurityScanner和流光等,openvas是一款最全面的开源漏洞扫描工具,由于openvas安装比较困 ...

  7. postgresql sql语句 更改表名

    SELECT'alter table "public"."'|| t.tablename||'"'||' rename to "'|| "l ...

  8. log大全

    http://www.iconfont.cn/search/index?q=%E6%88%91%E7%9A%84&page=3

  9. 「HAOI2016」字符合并

    「HAOI2016」字符合并 题意: ​ 有一个长度为\(n\)的\(01\)串,你可以每次将相邻的\(k\)个字符合并,得到一个新的字符并获得一定分数.得到的新字符和分数由这\(k\)个字符确定.你 ...

  10. 【MongoDB】mongodump and mongorestore of mogodb

    The another tool will be mentioned in this blog, namely mongodump and mongorestore. General speaking ...