原理版：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单验证</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        #myForm {

            width: 400px;

            padding: 20px;

            margin: 50px auto;

            border: 1px solid #eee;

        }

        input {

            margin: 20px 20px 20px 10px;

            padding: 5px 10px;

        }

    </style>

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

    <script>

        $(function () {

            var flag = false;

//            blur: 元素失去光标触发的事件；

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

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

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

                    $("span").eq(0).html("输入正确").css("color", "green");

                   flag1 = true;

                } else {

                    $("span").eq(0).html("格式错误").css("color", "red");

                    flag1 = false;

                }

            })

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

//                ^: 在中括号里表示取反（排除）， 在中括号外表示从头开始；

//                $: 表示结尾。

                var re = /^\S{6,12}$/;

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

                    $("span").eq(1).html("输入正确").css("color", "green");

                    flag2 = true;

                } else {

                    $("span").eq(1).html("格式错误").css("color", "red");

                    flag2 = false;

                }

            })

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

//                triggerHandler: 自动触发事件；

                $("#txt").triggerHandler("blur");

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

                if ( flag1 == false || flag2 == false ) {

                    return false;

                }

            })

        })

    </script>

</head>

<body>

<form action="http://www.baidu.com" id="myForm">

    邮箱： <input type="text" id="txt"><span></span> <br>

    密码： <input type="password" name="" id="pwd"><span></span> <br>

    <input type="submit" value="提交">

</form>

</body>

</html>

升级适应版：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .ok {

            color: green;

        }

        .error {

            color: red;

        }

    </style>

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

    <script>

        $(function () {

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

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

                if ($(this).parent().find(".ok,.error").length > 0) {

                    $(this).parent().find(".ok,.error").remove();

                }

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

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

                } else {

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

                }

            });

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

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

                if ($(this).parent().find(".ok,.error").length > 0) {

                    $(this).parent().find(".ok,.error").remove();

                }

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

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

                } else {

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

                }

            });

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

                $("#user").triggerHandler("blur");

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

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

                    return false;

                }

            });

        });

    </script>

</head>

<body>

    <form action="http://www.baidu.com" id="userForm">

        <p>

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

        </p>

        <p>

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

        </p>

        <p>

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

        </p>

    </form>

</body>

</html>

　

邮箱&&密码验证-原理的更多相关文章

  1. javascript,html,正则表达式，邮箱密码验证

    <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">   ...

  2. spring security的BCryptPasswordEncoder加密和对密码验证的原理

    目录 BCryptPasswordEncoder加密和对密码验证的原理 一.加密算法和hash算法的区别 二.源码解析 1. encode方法 2. BCrypt.hashpw方法 3. matche ...

  3. shopnc 支持 支付宝快捷登陆 shopnc权限验证原理说明

    为目前使用的是shopnc商场二次开发,shopnc本身做了qq互联和微博快捷登陆的api,做成了集成通用的接口 首先说下基本的这种类型的api访问方式,首先,的有个配置文件,配置你申请的id和key ...

  4. 【WCF】使用“用户名/密码”验证的合理方法

    我不敢说俺的方法是最佳方案,反正这世界上很多东西都是变动的,正像老子所说的——“反(返)者,道之动”.以往看到有些文章中说,为每个客户端安装证书嫌麻烦,就直接采用把用户名和密码塞在SOAP头中发送,然 ...

  5. Java实现注册邮箱激活验证

    邮件发送servelet实现 package com.xbs.register.main; import java.io.IOException;import java.util.Date;impor ...

  6. 跑PIN码破解无线网络WIFI密码的原理分析(转)

    你们家用的无线路由器安全吗?有人蹭网吗?无线路由器的漏洞在哪里?这么避免蹭网? 想要了解这些,必须要了解加密以及破解原理. 工具/原料 电脑 足够多足够好的wifi信号源 usb无线网卡(非必需) 一 ...

  7. 一个基于POP3协议进行邮箱账号验证的类

    最近老陈要针对企业邮箱做一些开发,以对接企业OA神马的,但企业邮箱唯独没有开放账号密码验证功能,很恼火!不得已,翻出早些年的Asp代码改编成了C#类,实现了一个C#下的通过POP3协议进行邮箱账号验证 ...

  8. NT平台ADSL拨号连接密码恢复原理

    NT平台拨号连接密码恢复原理 创建时间:2004-11-08 更新时间:2004-11-12文章属性:原创文章提交:eyas (eyas_at_xfocus.org)NT平台拨号连接密码恢复原理Aut ...

  9. Discuz常见小问题-如何设置163邮箱注册验证

    参考网址: https://jingyan.baidu.com/album/c843ea0b804a6e77931e4aa7.html?picindex=3 http://www.discuz.net ...

随机推荐

  1. css渲染（二） 文本

    一.文本样式  首行缩进 text-indent 首行缩进是将段落的第一行缩进,这是常用的文本格式化效果.一般地,中文写作时开头空两格.[注意]该属性可以为负值:应用于: 块级元素(包括block和i ...

  2. CodeForces-748B

    关键在于判断是否能够得到解决办法,我的思路就是用一个数组来记录每个小写字母对应的按键,如果它出现对应两个级以上不同的按键那么就说明不能得出解决办法,直接打印'-1'.如果能够得出解决办法,就扫描一下数 ...

  3. tcp/ip 卷一 读书笔记（3）为什么既要有IP地址又要有MAC地址

    网络层 首先明确一点,并不是所有的网络之间传输数据都需要mac地址和ip地址,比如说点对点线路之间的通信就没有MAC地址,网络层使用ipx协议时就没有ip地址,但是在当前的主流网络中,我们都使用ip地 ...

  4. 【DDD】领域驱动设计实践 —— 一些问题及想法

    在社区系统的DDD实践过程中,将遇到一些问题和产生的想法记录下来,共讨论. 本文为[DDD]系列文章中的其中一篇,其他内容可参考:使用领域驱动设计思想实现业务系统. 1.dto.model和entit ...

  5. 重新编译Linux内核必要性及其准备工作

    内核简介 内核,是一个操作系统的核心.它负责管理系统的进程.内存.设备驱动程序.文件和网络系统,决定着系统的性能和稳定性. Linux的一个重要的特点就是其源代码的公开性,所有的内核源程序都可以在/u ...

  6. 微信开源的Android热补丁框架 Tinker

    前不久,微信开源了其Android热补丁框架Tinker,它的特别之处在于放在github.com/Tencent下面,是该账号下第一个正式的开源项目,可以看到腾讯对它的重视和认可. 早在6月份微信客 ...

  7. mac下安装ELK

    本文主要为自己所走弯路而做的补充,对小白(比如我)来讲某些博客讲的还是高深了,特地来此补充说明一些东西. 主要步骤参考http://blog.csdn.net/ywheel1989/article/d ...

  8. Android查缺补漏（线程篇）-- AsyncTask的使用及原理详细分析

    本文作者:CodingBlock 文章链接:http://www.cnblogs.com/codingblock/p/8515304.html 一.AsyncTask的使用 AsyncTask是一种轻 ...

  9. box-sizing -- 盒模型

    项目开发中,在浏览同事的代码,发现他经常用一个属性--box-sizing,很好奇是什么,于是乎,上网查阅资料学了起来. 首先我们先复习一下盒模型的组成:一个div通常由 content(内容)+ma ...

  10. JDBCTemplate简化JDBC的操作（三）需要注意的地方

    一,代码 List<String> cols = orgJdbcTemplate .queryForList( "SELECT COLUMN_NAME FROM informat ...