<!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. Hibernate_添加联系人练习

    分析: 联系人与客户是多对一,一个客户(公司)有多个联系人,在多的这一方,即LinkMan, 1.LinkMan.java中除自身属性外,还需要 2.在hbm.xml文件中,加上 意思是建立一个外键用 ...

  2. mac 下的 homebrew

    如果安装了macport 就不能安装homebrew ,必须先卸载macport $ sudo port -f uninstall installed$ sudo rm -rf \/opt/local ...

  3. Linux硬链接和软连接

    硬链接(hard link): A是B的硬链接(A和B都是文件名),则A的目录项中的inode节点号与B的目录项中的inode节点号相同,即一个inode节点对应两个不同的文件名,两个文件名指向同一个 ...

  4. 官方支持的全新版Neo4j-JDBC驱动3.0

    原文:The All-New, Officially Supported Neo4j-JDBC Driver 3.0 作者: Michael Hunger 译者:仲培艺,关注数据库领域,纠错.寻求报道 ...

  5. ASP.NET Core 中使用TypeScript

    ASP.NET Core 注意:Visual Studio 2017和最新版本的ASP.NET的更新即将推出! 安装 ASP.NET Core 和 TypeScript 首先,若有必要请安装 ASP. ...

  6. 2018-8-15-WPF-插拔触摸设备触摸失效

    title author date CreateTime categories WPF 插拔触摸设备触摸失效 lindexi 2018-08-15 08:12:47 +0800 2018-08-09 ...

  7. 怎么在 CentOS 6 上配置私有 NPM 仓库？

    Sinopia 是一个简单易用的私有 NPM 仓库服务器.在 CentOS 6 上安装时,遇到如下报错(Node 版本 6.9.1) #error This version of node/NAN/v ...

  8. PHP核心编程--站内搜索

    一.         站内搜索 前台页面: 在index.php页面中添加一个表单,输入搜索框 后台页面: 将index.php另存为search.php 对于搜索的 分页关键代码: 高亮关键字 相关 ...

  9. vagrant up 时提示错误 cound not open file

    根据教程:https://laravel-china.org/docs/laravel-development-environment/5.5/development-environment-wind ...

  10. 只在需要的时候 Polyfill 你的 JavaScript 代码

    本文转载自 Pascal Klau,他是一名来自德国南部的实习生,他讨厌不必要的 HTTP 请求,也不爱吃西兰花.Pascal 将说明使用 polyfill 服务的一种方式,在这种方式下你可能可以完全 ...