<!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. Vue2.0 + ElementUI的+ PageHelper实现的表格分页

    参考博客:http://blog.csdn.net/u012907049/article/details/70237457 借鉴1.controller层编写 2.vue中,axios的写法(总页数等 ...

  2. Android开发-网络通信2

    调试了三种通信方法:HttpClient.AsyncHttpClient 和 Volley . HttpClient 测试代码[1]: public class HttpUtil { public s ...

  3. C4 文件和目录：APUE 笔记

    C4: 文件和目录 本章主要讨论stat函数及其返回信息,通过修改stat结构字段,了解文件属性. struct stat结构定义如下: struct stat { __dev_t st_dev; / ...

  4. php redis 秒杀demo

    $redis = new Redis(); $redis->connect("127.0.0.1", "6379"); $redis->select ...

  5. Python在线教程（廖雪峰）

    http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000

  6. [Vue]vee-validate的使用——自定义校验规则及校验message

    1.安装vee-validate npm install vee-validate --save 2.main.js里引用vee-validate插件 import Vue from 'vue' im ...

  7. mysql数据库开放远程连接的方法

    web与mysql数据库分离开来是一个不错的选择,避免因为大量的数据库查询占用CPU而使web资源不足,同时可以使web服务器的资源尽最大的提供浏览服务,而数据库服务器单独的只处理数据库事物. 适用范 ...

  8. 如何在 Ubuntu 中安装 QGit 客户端

    QGit是一款由Marco Costalba用Qt和C++写的开源的图形界面 Git 客户端.它是一款可以在图形界面环境下更好地提供浏览版本历史.查看提交记录和文件补丁的客户端.它利用git命令行来执 ...

  9. 微信小程序------基本组件

    今天主要是简单的讲一下小程序当中的一些组件,微信文档上也是有的.但我还是坚持写一下,因为写博客可以再一次得到提高,印象更深刻,虽然很简单,但贵在坚持. 先来看看效果图: 1:进度条(progress) ...

  10. Python写入CSV文件的问题

    这篇文章主要是前几天我处理数据时遇到的三个问题: Python写入的csv的问题 Python2与Python3处理写入写入空行不同的处理方式 Python与Python3的编码问题 其实上面第3个问 ...