原理版:

<!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. UESTC 251 最长上升子序列O(nlgn)

    O(n^2)过不了.必须要用一个额外的数组保存当前长度最小值,然后lgn查表 AC代码 #include<cstdio> #include<algorithm> using n ...

  2. HDU - 2112 HDU Today Dijkstra

    注意: 1.去重边 2.终点和起点一样,应当输出0 3.是无向图 AC代码 #include <cstdio> #include <cmath> #include <al ...

  3. day2(字符串、格式化输出、运算符、流程控制)

    一.字符串 在Python中,加了引号的字符都被认为是字符串! 单引号.双引号.多引号的区别? 单引号和 双引号没有任何区别,但是某种情况下需要单双配合 如 msg = " My name ...

  4. __proto__ 与 prototype

    先来做个复习,ES5中有有几种数据类型呢? 5种基本数据类型 Undefined Null Boolean Number String 1种复杂数据类型 Object 除了基本数据类型,万物皆对象,记 ...

  5. 【前端】Vue2全家桶案例《看漫画》之番外篇、express上传漫画(可选)

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_extra_1.html 项目github地址:https://github.com/sha ...

  6. AfxBeginThread和CreateThread具体区别

    1. 具体说来,CreateThread这个函数是windows提供给用户的 API函数,是SDK的标准形式,在使用的过程 中要考虑到进程的同步与互斥的关系,进程间的同步互斥等一系列会导致操作系统死锁 ...

  7. Python 文件的输入与输出

    1. 文本文件的读写主要通过open()所构建的文件对象来实现.我们打开一个文件,并使用一个对象来表示该文件 , f = open(d,r) 其中d是文件名,r是模式 "r" 文件 ...

  8. WPF自学入门(二)WPF-XAML布局控件

    上一篇介绍了xaml基本知识,我们已经知道了WPF简单的语法.那么接下来,我们要认识一下WPF的布局容器.布局容器可以使控件按照分类显示,我们一起来看看WPF里面可以使用哪些布局容器用来布局. 在WP ...

  9. eclipse - The superclass "javax.servlet.http.HttpServlet" was not found on the Java

  10. CentOS 7.0 启动多个MySQL实例(mysql-5.7.21)

    Linux系统:CentOS-7.0 MySQL版本:5.7.21 Linux系统下启动多个MySQL实例,目前知道有两种方法,一种是通过官方提供的mysqld_multi.server来实现,但是我 ...