<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="../jquery-1.7.2/jquery.min.js"></script>

    <script>

    $(function(){

        //onblur: 光标离开控件，会触发onblur事件

        $("#email").blur(function(){

            var re = /^\w+@\w+(\.\w+){1,3}$/;

            if ( $(this).parent().find( "span" ).length > 0 ) {

                $(this).parent().find( "span" ).remove();

            }

            if ( re.test( $(this).val() ) ) {

                $(this).after( "<span class='ok'>格式正确</span>" );

            }else {

                $(this).after( "<span class='error'>格式错误</span>" );

            }

        });

        $("#pwd").blur(function(){

            var re = /^\w{6,20}$/;

            if ( $(this).parent().find( "span" ).length > 0 ) {

                $(this).parent().find( "span" ).remove();

            }

            if ( re.test( $(this).val() ) ) {

                $(this).after( "<span class='ok'>格式正确</span>" );

            }else {

                $(this).after( "<span class='error'>格式错误</span>" );

            }

        });

        $("#reg :submit").click(function(){

            $("#email").trigger("blur");

            $("#pwd").trigger("blur");

            if ( $("#reg").find(".error").length > 0 ) {

                return false;

            }

        });

    });

    </script>

    <style>

    .ok {

        color:green;

    }

    .error {

        color:red;

    }

    </style>

</head>

<body>

    <form action="http://www.baidu.com" method="get" id="reg">

        <p class=emailParent>

            邮箱: <input type="text" name="email" id="email">

        </p>

        <p>

            密码: <input type="text" name="pwd" id="pwd">

        </p>

        <p>

            <input type="submit" id="submit" value="注册" >

        </p>

    </form>

</body>

</html>

html前端登录验证的更多相关文章

  1. 由前端登录验证，页面跳转，携带headers token引发的思考和尝试

    目录 1 前言 2 我的实现方式与存在的问题 3 我想到的解决方案 3.1 前端跳转时携带headers{'token': token} 不就行了(经验证不可行) 3.2 前端跳转封装请求,携带hea ...

  2. (html)前端如何验证token的合法性来判断用户是否登录？

    问题: (html)前端如何验证token的合法性来判断用户是否登录?描述: 1.我使用了JWT的方式,后端生成了一个token,将其返回给前端,前端获取到后每次请求接口都附带上这个token,后端来 ...

  3. python装饰器 & flask 通过装饰器 实现 单点登录验证

    首先介绍装饰器,以下是一段标注了特殊输出的代码.用于帮助理解装饰器的调用过程. import time def Decorator_one(arg1): info = "\033[1;31; ...

  4. 基于权限安全框架Shiro的登录验证功能实现

    目前在企业级项目里做权限安全方面喜欢使用Apache开源的Shiro框架或者Spring框架的子框架Spring Security. Apache Shiro是一个强大且易用的Java安全框架,执行身 ...

  5. ASP.NET Core 一步步搭建个人网站（4）_主页和登录验证

    上章节我们已经定制好动态配置的菜单,用户登录网站的第一步就是进入首页内容,那我们先搭建一下我们的首页内容.想着自己的网站内容主要是个人博客类型,所以,首页就展示博主本人的一些基本信息吧,哈哈.当然,做 ...

  6. [转载：Q1mi]Bootstrap和基于Bootstrap的登录验证示例

    转载自:Q1mi Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支 ...

  7. Spring 笔记 -06- 从 MySQL 建库到 登录验证数据库信息（maven）

    Spring 笔记 -06- 从 MySQL 建库到 登录验证数据库信息(maven) 本篇和 Spring 没有什么关系,只是学习 Spring,必备一些知识,所以放在这里了. 本篇内容: (1)M ...

  8. 2-功能1：基于用户认证组件和Ajax实现登录验证(图片验证码)

    1.登录页面的设计 (1)label标签的id属性 label标签的id属性,点击label标记,相当于点击了input框 bootstarp样式 class="form-group&quo ...

  9. DJango简单的后台定义登录验证

    第一步创建一个新的项目 APPLICATIONNAME : 表示创建子项目 第二步:找到主项目的url 进行 include 分发式url 简单的说,就是将app里边的url放在这里. 这里也可以找到 ...

随机推荐

  1. 洛谷P1621 集合 [2017年6月计划 数论13]

    P1621 集合 题目描述 现在给你一些连续的整数,它们是从A到B的整数.一开始每个整数都属于各自的集合,然后你需要进行一下的操作: 每次选择两个属于不同集合的整数,如果这两个整数拥有大于等于P的公共 ...

  2. 【模板】矩阵快速幂 洛谷P2233 [HNOI2002]公交车路线

    P2233 [HNOI2002]公交车路线 题目背景 在长沙城新建的环城公路上一共有8个公交站,分别为A.B.C.D.E.F.G.H.公共汽车只能够在相邻的两个公交站之间运行,因此你从某一个公交站到另 ...

  3. 架构 － 业务流程管理介绍（BPM）

    什么是业务流程 维基百科中说,业务流程是为特定的对象(客户)创造价值的过程,这一过程由一系列相关联.有组织的活动或任务组成.企业和组织中的流程常常划分为三种基本类型: 管理流程——对系统运作进行管制. ...

  4. Thinkphp 不足之处

    1.报错机制 //控制器里面直接输出如下内容,代码不提示.TP报错机制已经开启 echo $aaaaaa; bbbbbbbbb; eco bbbbbbbb; 正常应该给出以下提示 Notice: Un ...

  5. 数据库通过sql备份脚本恢复时，报错误The user specified as a definer ('root'@'%') does not exist

    数据库通过sql备份脚本恢复时,报错误The user specified as a definer ('root'@'%') does not exist 当出现这个错误,意思是某个数据库对象的定义 ...

  6. C#中Object转化为json对象

    比如定义一个类: public class Lines { public string X1 { get; set; } public string X2 { get; set; } public s ...

  7. 【python爬虫】加密代理IP的使用与设置一套session请求头

    1:代理ip请求,存于redis: # 请求ip代理连接,更新redis的代理ip def proxy_redis(): sr = redis.Redis(connection_pool=Pool) ...

  8. 基于mcp940反编译Minecraft源代码

    引言 Minecraft中文叫"我的世界",没怎么深入玩过,来试试把它源代码反编译出来吧. 参考教程: https://minecraft.gamepedia.com/Mods/C ...

  9. Spring → 《Spring程序开发》教材大纲

  10. python 对象的封装性