<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>表单正则验证</title>

<style type="text/css">

*{

    margin: 0;

    padding: 0;

}

body{

    background: #eee;

}

a{

    text-decoration: none;

}

ul,ol{

    list-style: none;

}

#Msg-form{

    width: 700px;

    border: 1px solid #e5e5e5;

    border-radius: 10px;

    background: #44D0F6;

    margin: 0 auto;

}

#top{

    width: 100%;

    height: 12px;

    padding: 10px 10px 20px 10px;

    border-bottom: 1px dashed #e4e4e4;

}

#top h3{

    width: 12%;

    float: left;

    text-align: center;

    line-height: 30px;

}

#top span{

    float: left;

    color: #FDA010;

    border: 1px solid #FDA010;

    font-size: 14px;

    line-height: 20px;

    padding: 2px 8px;

}

#top a{

    float: right;

    text-align: center;

    color: #fff;

    background: #F95050;

    line-height: 20px;

    padding: 2px 8px;

    border-radius: 10px;

    font-size: 14px;

}

#box{

    padding: 0px 20px ;

    overflow: hidden;

}

#box div{

    margin: 30px;

    height: 21px;

}

#box div label{

    float: left;

    font-size: 14px;

    text-align: right;

}

#box div span{

    float: left;

    color: red;

    text-align: left;

    width: 30%;

    height: 21px;

}

#box div input{

    float: left;

    border: 0;

    height: 21px;

    width: 200px;

    font-size: 10px;

    padding:2px 8px;

    background: #eee;

    border-radius: 5px;

}

em{

    color: red;

    font-weight: 900;

}

#reset{

    margin: 0 30px;

}

#last{

    width: 500px;

    text-align: center;

}

</style>

</head>

<body>

<form action="javascript:;" id="Msg-form">

    <div id="top">

        <h3>注册账号</h3>

        <span>*号为必填项！</span>

        <a href="#">反馈意见</a>

    </div>

    <div id="box">

        <div id="login-Id">

            <label for="Id">登录账号</label>

            <span>*</span>

            <input type="text" id="Id" placeholder="字母开头数字下划线组成" required>

            <em></em>

        </div>

    <div id="login-Name">

        <label for="Name">你的昵称</label>

        <span></span>

        <input type="text" id="Name" placeholder="中英文皆可">

        <em></em>

    </div>

    <div id="login-Email">

        <label for="Email">你的邮箱</label>

        <span>*</span>

        <input type="text" id="Email" placeholder="格式：2438387860@qq.com" required>

        <em></em>

    </div>

    <div id="login-Password">

        <label for="Password">设置密码</label>

        <span>*</span>

        <input type="password" id="Password" placeholder="英文字母/数字/特殊字符" required>

        <em></em>

    </div>

    <div id="login-CheckPassword">

        <label for="CheckPassword">确认密码</label>

        <span>*</span>

        <input type="password" id="CheckPassword" required>

        <em></em>

    </div>

    <div id="login-CheckPassword">

        <div id="left"></div>

        <div id="strong"></div>

    </div>

    <div id="last">

        <input id="btn" type="submit" value="提交">

        <input type="reset" id="reset">

    </div>

</div>

<input id="day" type="checkbox"><label for="">10天内免登陆</label>

</form>

<script src="form.js"></script>

</body>

</html>
 
js如下：
function $(id){

    return document.getElementById(id);

}

var oId = $('Id');

var sId = oId.value;

var oMsg = $('Msg-form');

var oName = $('Name');

var oEmail = $('Email');

var oPassword = $('Password');

var oCheckPassword = $('CheckPassword');

var str = document.getElementsByTagName('em');

oMsg.onsubmit = function(){

// 账号判断

var sId = oId.value;

var regId = /^[a-zA-Z0-9_]\w{4,15}$/;

if(regId.test(sId)){

    str[0].innerHTML = '√';

} else{

    str[0].innerHTML = '×';

}

// 判断中英文

var sName = oName.value;

var regName = /^[\u2E80-\u9FFF]+$/;

if(regName.test(sName)){

    str[1].innerHTML = '√';

} else{

    str[1].innerHTML = '×';

}

// 判断邮箱

var sEmail = oEmail.value;

var regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;

if(regEmail.test(sEmail)){

    str[2].innerHTML = '√';

}else{

    str[2].innerHTML = '×';

}

// 判断密码

var sPassword = oPassword.value;

var regPassword = /^[a-zA-Z0-9]\w{3,15}$/;

if(regPassword.test(sPassword)){

    str[3].innerHTML = '√';

}else{

    str[3].innerHTML = '×';

}

// 判断再次输入的密码是否和上一次一致

var sCheckPassword = oCheckPassword.value;

if(sCheckPassword === sPassword){

    str[4].innerHTML = '√';

}else{

    str[4].innerHTML = '×';

}

function setCookie(name,value,days,path){

    days = days || 0;

    path = path || '/';

    var oDate = new Date();

    oDate.setDate(oDate.getDate() + days);

    document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + oDate + ';path=' + path;

}

var oDay = $('day');

    if(oDay.checked){

        setCookie('username',sId,10);

        setCookie('pwd',sPassword,10);

    }

}
 
// 设置cookie
// 封装
 

js之10天内免登陆的更多相关文章

  1. JavaWeb 08_JSP+Dao+Bean+Servlet 实现登录注册（连接数据库，验证码登录，两周内免登陆等功能）

    一.数据库db_01   表usert   字段username,password 二. 目录 三. 配置信息 四. 代码 index.jsp <script type="text/j ...

  2. cookie应用（一周内免登陆）

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

  3. JS脚本实现CSDN免登陆免关闭广告插件自动展开“阅读更多”内容

    最近在CSDN查资料,总是弹出以下弹窗,然后就自动跳转到登录页面,蛋疼! 于是重新捣腾了一下,修改了原来的脚本,最新的脚本代码如下: 温馨提示:在打开CSDN页面后立刻执行以下脚本即可免登陆免关闭广告 ...

  4. [linux]阿里云主机的免登陆安全SSH配置与思考

    公司服务器使用的第三方云端服务,即阿里云,而本地需要经常去登录到服务器做相应的配置工作,鉴于此,每次登录都要使用密码是比较烦躁的,本着极速思想,我们需要配置我们的免登陆. 一 理论概述 SSH介绍 S ...

  5. JAVAEE_Servlet_22_Cookie实现十天内免登录

    Cookie实现十天内免登录 代码: - CheckLogin 查看是否获取到了Cookie,如果获取到了连接数据库验证Cookie发过来的用户名和密码,如果没有获取到Cookie信息,那么就跳转到登 ...

  6. 2015.4.21 实现一般免登陆，微博QQ分享，字体自适应等

    1.实现一般的登录验证和免登陆: 解决方法:node方法代码,nodeJS实现的session模块,不完整,但能用,仅供参考. 语言无所谓,session的机制都是一样的,实现不一样而已,:   2. ...

  7. 项目总结之Oauth2.0免登陆及相关知识点总结

    简介Oauth2.0授权步骤 授权码模式的基本步骤 原文链接地址 (A)用户访问客户端,后者将前者导向认证服务器. (B)用户选择是否给予客户端授权. (C)假设用户给予授权,认证服务器将用户导向客户 ...

  8. Mac OS X上如何实现到Linux主机的ssh免登陆

    转载说明: 本文转载自 http://www.aips.me/mac-key-ssh-login-linux.html 生成密钥对 用密码登录远程主机,将公钥拷贝过去 done 第一步:生成密匙对执行 ...

  9. 钉钉微应用接入钉钉免登陆配置记录。NET实现

    在这里记录一下我配置的钉钉接入微应用遇到的坑.搞了我几天天才调通.头皮发麻,现在梳理一下,以免别人也入坑. 1.钉钉接入主要要获取钉钉企业员工的ID,然后去自己的应用的数据库里进行匹配然后实现免登陆的 ...

随机推荐

  1. [BZOJ1576]安全路经Travel

    题目大意:从1号点出发,到每个点的最短路的最后一条边不能被访问,求此时1号点到其他点的最短路 建立最短路树,对于一条非树边,把它加进去会形成一个环和一条链,如图: 即红色和蓝色路径构成的图,它的长度为 ...

  2. intellij idea rearrange code

        reformat code的时候,无法将filed放在method前边,很恶心. 那么先去

  3. C#中将一个引用赋值null的作用

    有类A,以及A类型的变量a和b.初始化a之后,将a赋给b.之后将a赋为null.之后b还是可以使用. 思维误区:本来以为a=null之后,b也应该等于null. 实际测试效果如下 class Prog ...

  4. vue集成ueditor

    相关代码见github 1.引入ueditor相关的文件,具体目录见下图如下 我将下载的文件放在static下面,这里专门用来放置相关的静态文件 (在ueditor.config.js需要配置一下路径 ...

  5. 【eclipse】启动不了报错java was started but returned exit code=13

    原因是jdk与eclipse的版本不对,一个是32位的一个是64位的.

  6. Excel转化成DataTable实现：NPOI和OLEDb

    使用两种方式实现的excel数据转化成DataSet,再结合前一篇的DataTable转化为实体,就可以解决excel到实体之间的转化. 代码如下: 首先定义一个接口: public interfac ...

  7. ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/usr/local/mysql/tmp/mysql.sock'

    查看是否开启服务 # ps -ef | grep mysql root 5605 5457 0 11:45 pts/2 00:00:00 grep mysql 查看my.cnf # cat /etc/ ...

  8. Android自定义圆形ProgressBar

    闲来无事做了一个自定义的进度条,大致效果图如下: progressbar.gif 废话不多说,下面直接上代码: 自定义控件代码CircleProgressBar.java: public class ...

  9. [Vue]Vue语法糖v-bind、v-on

    语法糖 :是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发,简化代码是书写. Vue.js的v-bind和v-on指令都提供了语法糖,也可以说是缩写. 1.v-bind可以省略, ...

  10. 马哥教育python网络班19期 学习目标

    马哥教育python网络班19期 学习目标: (1)按群里的学习进度表,来自行学习,学完时间6个月. (2)学完后,薪资能达到20K+每月.