<!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. SPOJ GSS5

    GSS5 - Can you answer these queries V #tree You are given a sequence A[1], A[2], ..., A[N] . ( |A[i] ...

  2. 【洛谷P2907】 【USACO08OPEN】农场周围的道路 水模拟分治

    P2907 [USACO08OPEN]农场周围的道路Roads Around The Farm 题目描述 Farmer John's cows have taken an interest in ex ...

  3. token流程图

  4. python-None

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

  5. JDK8 Stream 数据流效率分析

    JDK8 Stream 数据流效率分析 Stream 是Java SE 8类库中新增的关键抽象,它被定义于 java.util.stream (这个包里有若干流类型: Stream<T> ...

  6. PHP协程：并发 shell_exec

    在PHP程序中经常需要用shell_exec执行一些命令,而普通的shell_exec是阻塞的,如果命令执行时间过长,那可能会导致进程完全卡住.在Swoole4协程环境下可以用Co::exec并发地执 ...

  7. phpcms 允许英文目录有空格

    大家都用过phpcm添加栏目吧,在添加栏目里面,有个选项是 英文目录,这里目录可以用作伪静态功能.这么英文不能有空格等特殊字符.但是如果页面中需要引用包含空格的字符呢,例如,关于我们页面,我要显示英文 ...

  8. jQuery圆盘抽奖

    在线演示 本地下载

  9. 友盟iOS sdk整理

    文档中心 :http://dev.umeng.com 集成文档:http://dev.umeng.com/analytics/ios-doc/integration 报表中心:http://www.u ...

  10. Leetcode811.Subdomain Visit Count子域名访问计数

    一个网站域名,如"discuss.leetcode.com",包含了多个子域名.作为顶级域名,常用的有"com",下一级则有"leetcode.com ...