学习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. Linux 桌面玩家指南：18. 我对 Docker 的使用的学习心得

    原文:Linux 桌面玩家指南:18. 我对 Docker 的使用的学习心得 特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记 ...

  2. MySQL改变表的存储引擎

    MySQL提供了多种数据库存储引擎,存储引擎负责MySQL数据库中的数据的存储和提取.不同的存储引擎具有不同的特性,有时可能须要将一个已经存在的表的存储引擎转换成另外的一个存储引擎.有非常多方法能够完 ...

  3. html --- bootstrap 框架 （栅格系统布局）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. string StartsWith 方法 Https

    public ActionResult Index()        {            string url = "Https://www.baodu.com";      ...

  5. go 可以开发桌面应用

    go 可以开发桌面应用 go 可以开发桌面应用,但并不是很舒适.可以使用的GUI库有:1.goqt,LiteIDE作者出品,Go和QT的绑定,还未发布2.go.uik,纯Go实现的并发UI工具3.wa ...

  6. css相关用法

    1. 2. 3.offset([coordinates]) 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整型属性:top 和 left,以像素计.此方法只对可见元素有效. a.获取当前元素的 ...

  7. java(运算符，控制流程语句，函数 )

    运算符 数据类型转换: 小数据类型-------->大数据类型(自动类型转换) 大数据类型--------->小数据类型(强制类型转换) 强制类型转换的格式: 小数据类型  变量名 = ( ...

  8. JavaScript笔记（2)

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

  9. JS错误记录 - dom操作 - 排序

    本次练习错误总结: 1. for循环要套到按钮的onclick里面,否则onclick点击事件无法依次执行. 2. var n1, var n2 这两个变量是arr.sort排序使用的,所以应该放在s ...

  10. 【试水CAS-4.0.3】第07节_CASclient配置单点登录

    完整版见https://jadyer.github.io/2015/07/26/sso-cas-client-login/ 本文源代码下载:http://download.csdn.net/detai ...