regexp模式匹配+location页面跳转+cookie/localstorage本地存储

学习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.regexp备注

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结尾

时间: 2024-11-01 14:10:05

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

HTML5 localStorage本地存储实际应用举例

HTML5 localStorage本地存储实际应用举例 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1952 一.引言 HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性.就我所做的项目而言,应用的HTML5相关特性有:data-自定义属性.placeholder.以及email类型input文本框.上周新上线的会员中心,自己又

LocalStorage本地存储

LocalStorage,即"Web存储",某些浏览器供应商也叫"本地存储"."DOM存储",原本作为HTML5标准的一部分,后来因为某些原因被抽离出来作为单独的WEB应用标准.localStorage提供了一种方式,让Web页面在客户端浏览器中以键值对的形式存储本地字符串数据,无论是用户是离开该站点,刷新,关闭浏览器还是其他操作,存储的数据依然存在. 一.localStorage与cookie localStorage与cookie一样,都是在

localStorage本地存储的简单使用

我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储. 1.localStorage.name="老王";      //第一种设置存储本地数据的方法localStorage 2.localStorage.setItem("color","red");   //第二种设置存储本地数据的方法 3.localStorage.removeItem("name"); //删除本地存储数据 4.localStor

HTML5 LocalStorage 本地存储

LocalStorage 本地存储方法如下: setItem : function(key, value)getItem : function(key)removeItem : function(key)clear : function()length : intkey : function(i)isVirtualObject : true 本地存储K的值时 localStorage.setItem('k','a'); 存储在本地,可以直接调用JSON.stringify()将其转为字符串 fu

HTML5 LocalStorage 本地存储(转)

原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存在了

HTML5 localStorage本地存储

介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2. 成员 2.1 属性 2.2 方法 2.3 事件 3. 示例 3.1 存储数据 3.2 读取数据 3.3 存储Json对象 1. 介绍 1.1 说明 localStorage 即本地存储,可用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. 在JavaScript语言中可通过 wi

(转载)HTML5 LocalStorage 本地存储

原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存

Localstorage本地存储兼容函数

前言HTML5提供了本地存储的API:localstorage对象和sessionStorage对象,实现将数据存储到用户的电脑上.Web存储易于使用.支持大容量(但非无限量)数据同时存储,同时兼容当前所有主流浏览器,但不兼容早期浏览器.存储APIlocalStorage和sessionStorage通常被当做普通的JavaScript对象使用:通过设置属性来存储字符串值,查询该属性来读取该值.除此之外,这两个对象还提供了更加正式的API.调用setItem()方法,将对应的名字和值传递出去,可

初识html5的localStorage本地存储

一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高. 在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据.它使在不影响网站性能的情况下存储大量数据成为可能. 对于不同的网站,数