<!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. Leetcode8.String to Integer (atoi)字符串转整数(atoi)

    实现 atoi,将字符串转为整数. 该函数首先根据需要丢弃任意多的空格字符,直到找到第一个非空格字符为止.如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连续的数字组合起来,这部分字 ...

  2. intellij idea cpu占用率太大太满 运行速度太慢解决方案

    1.关掉代码检查. setting -> Editor -> Inspections,把右面方框框里的对勾全去掉,或者根据需要去掉.原理是关闭不必要的代码检查,提高速度. 2.关掉多余的插 ...

  3. python-None

    今天偶然间,有人问了一个问题,项目中出现了一个这样的错误. 看到后,就想到是前后数据类型不一致.当时他定义了一些默认初始值为None(刚接触python代码,之前是c,java),然后就后边出现了这样 ...

  4. SpingBoot myBatis neo4j整合项目案例

    此项目为spring boot - myBatis - neo4j数据库整合项目. 有增删改查(节点关系).动态分页条件排序等一些示例. git下载地址:git clone https://githu ...

  5. DirectX11笔记(一)--配置DirectX工程

    原文:DirectX11笔记(一)--配置DirectX工程 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010333737/article/d ...

  6. PHPCMS V9双语站建设切换

    PHPCMS V9要做双语,很多同学都是迷茫的,在此特地分享我的双语制作步辶 我这种模式是把两个站点都改为HTML静态模式才可以实现 双语切换可分为两种模式: 1.解析二级域名来切换双语 解析二级域名 ...

  7. openssl生成SSL证书的流程 - moonhillcity的博客 - CSDN博客

    1.安装openssl 之后在/usr/lib/ssl目录下(ubuntu系统,用whereis查下ssl目录即可)下找到openssl.cnf,拷贝到工作目录下. 2.工作目录下新建demoCA文件 ...

  8. 【OI】二分图最大匹配

    所谓二分图,是可以分为两个点集的图: 所谓二分图最大匹配,是两个点集之间,每两个不同点集的点连接,每个点只能连一个点,最大的连接数就是最大匹配. 如何解最大匹配,需要用到匈牙利算法. 另:本文写了很多 ...

  9. JavaScript--微博发布效果

    效果图: 实现思路:  当发布按钮被点击时,又会分为三种情况 1.如果输入的内容为空,弹出提示:不能发布空微博 2.如果输入的文字超过120,弹出提示,微博内容不能超过120 3.正常发布微博到列表里 ...

  10. 使用php实现单点登录实例详解

    1.首先准备两个虚拟域名 127.0.0.1 www.openpoor.com 127.0.0.1 www.myspace.com 2.在openpoor的根目录下创建以下文件 index.php文件 ...