<!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. HDU 1690 最短路

    #include<stdio.h> #include<string.h> #include<queue> #include<algorithm> usi ...

  2. 阿里云 EMAS HTTPDNS 联合函数计算重磅推出 SDNS 服务，三大能力获得突破

    1. 什么是 HTTPDNS ? 传统的 DNS(Domain Name System)使开发者常面临着域名劫持.调度不精准的问题. HTTPDNS 使用 HTTP 协议替换常用的 UDP 协议,完成 ...

  3. 【JZOJ4762】【NOIP2016提高A组模拟9.7】千帆渡

    题目描述 输入 输出 样例输入 5 1 4 2 5 1 4 1 1 2 4 样例输出 2 1 4 数据范围 解法 设f[i][j]表示前 i个蓝色帆船中,选择了第 j个红色帆船作为结尾的最大答案. 那 ...

  4. linux下播放器设计和开发

    http://blog.csdn.net/henryjee/article/details/6737392 本文根据DawnLightPlayer的开发经验写成.DawnLithtPlayer是今天3 ...

  5. Oracle存储过程基本语法及基础教程

    存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 IS 3 BEGIN 4 NULL; 5 END; 行1: CREATE OR REPLACE PROCEDURE ...

  6. Directx11教程(43) 纹理映射(13)-动态纹理映射

    原文:Directx11教程(43) 纹理映射(13)-动态纹理映射      本篇教程中,我们将在前面基于光照的地形与水面程序里面加上纹理映射,而且我们会基于时间动态改变水面的纹理坐标,实现水面纹理 ...

  7. Tips：取消UICollectionView的隐式动画

    http://www.cocoachina.com/ios/20151204/14211.html UICollectionView在reloadItems的时候,默认会附加一个隐式的fade动画,有 ...

  8. 比较全面的一个PHP缓存类解析

    转自:http://www.blhere.com/1164.html 一.引论 PHP,一门最近几年兴起的web设计脚本语言,由于它的强大和可伸缩性,近几年来得到长足的发展,php相比传统的asp网站 ...

  9. poj 2236【并查集】

    poj 2236 Description An earthquake takes place in Southeast Asia. The ACM (Asia Cooperated Medical t ...

  10. 2019-8-29-dotnet-core-使用-sqlite-部署到-Centos-服务器

    title author date CreateTime categories dotnet core 使用 sqlite 部署到 Centos 服务器 lindexi 2019-08-29 19:1 ...