正则表达式验证用户名、邮箱、密码

原创 2016年08月31日 14:49:13

前几天碰到一个正则表达式验证表单数据的问题,就找了菜鸟教程的正则表达式过了一遍,顺便做了个小练习。


var reg1=/^[a-zA-Z]\w*$/i;
验证用户名:验证以字母开头,可包含字母,数字及下划线的用户名。

[a-zA-Z]表示以字母,\w 匹配包括下划线的任何单词字符,等价于'[A-Za-z0-9_]',*表示紧连着的前一个字符出现零次或多次。/^、$/分别代表正则表达式的开头及结尾。



完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
	body{
		margin: 0;
		padding: 0;
	}
	div.main{
		margin: 100px auto;
		width: 50%;
		height: 200px;
		border: 1px solid #CCC;
		padding: 30px 10px;
	}
	span{
		color: #F34949;
		font-size: 10px;
		/*display: none;*/
		margin-left:20px;
	}
	form{
		width: 100%;
		height: 100px;
		margin: 0px auto;
		padding: 30px 0px;
	}
	/*input{
		width: 180px;
	}*/
	.alr{
		text-align: right;
	}
	</style>
	<script type="text/javascript">
	function isUser(){
		var oVal1 = document.getElementById('user');
		var oSpan1 = document.getElementById('userInfo');

		var reg1=/^[a-zA-Z]\w*$/i;
        if(oVal1.value && !reg1.test(oVal1.value)){
            oSpan1.style.display = "inline-block";
        }else{
        	oSpan1.style.display = "none";
        }
	}

	function isPassword(){
		var oVal2 = document.getElementById('pass');
		var oSpan2 = document.getElementById('passInfo');

		var reg2 = /^([a-zA-z]+[0-9]+)|([0-9]+[a-zA-Z]+)$/i;

		if(oVal2.value.length >= 8 && reg2.test(oVal2.value)){
            oSpan2.style.display = "none";
        }else{
        	oSpan2.style.display = "inline-block";
        }
	}

	function isMail(){
		var oVal3 = document.getElementById('mail');
		var oSpan3 = document.getElementById('mailInfo');

		var reg3 = /^([a-zA-Z0-9_-])+\@([a-zA-Z0-9_-])+.([a-zA-Z])+$/;
		if(oVal3.value && reg3.test(oVal3.value)){
			oSpan3.style.display = "none";
		}else{
			oSpan3.style.display = "inline-block";
		}
	}
	</script>
</head>
<body>
<div class="main">
	<form>
		<label class="col-md-2 alr">用户名:</label>
		<input class="col-md-4" type="text" id="user" onkeyup="isUser()" />
		<span class="col-md-3" id="userInfo">以字母开头,可包含数字、字母、下划线。</span><br><br>
		<label class="col-md-2 alr">密码:</label>
		<input class="col-md-4" type="password" id="pass" onkeyup="isPassword()" />
		<span class="col-md-3" id="passInfo">至少8位,必须包含字母、数字</span><br><br>
		<label class="col-md-2 alr">邮箱:</label>
		<input class="col-md-4" type="text" id="mail" onblur="isMail()" />
		<span class="col-md-3" id="mailInfo">请输入正确邮箱</span>
	</form>
</div>
</body>
</html>




正则匹配用户名,邮箱,数字等及语法介绍

1、常用正则表达式 一个或多个汉字 :^[\u0391-\uFFE5]+$ 邮政编码:^[1-9]\d{5}$ QQ号码:^[1-9]\d{4,10}$ 邮箱:^[a-zA-Z_]{1,}[0-9...
  • eff666
  • eff666
  • 2016年08月11日 08:40
  • 5561

正则表达式之判断用户注册信息是否为汉字、字母和数字

一般在写用户注册模块的时候都在对注册的用户名进行判断,查看一下有没有.!@#$%^&*()等这样的特殊字符,注册信息里一般将这些字符视为非法字符不允许注册。怎么进行判断呢,这里就用到了正则表达式了。 ...
  • liuzhidong123
  • liuzhidong123
  • 2011年08月24日 11:08
  • 24592

JS的常用正则表达式 验证密码用户名等

js常用正则表达式收藏,验证用户名、密码、手机号等
  • u013058216
  • u013058216
  • 2016年12月24日 13:42
  • 4291

用正则表达式验证用户名是否合法

在网页的注册页面往往需要验证用户名是否合法。比如如下条件: ·由字母a~z(不区分大小写)、数字0~9、点、减号或下划线组成 ·只能以字母开头,包含字符 数字 下划线,例如:beijing.200...
  • rugaxm
  • rugaxm
  • 2012年07月14日 09:51
  • 28618

验证手机号、用户名的正则表达式

验证手机号码 /** * 验证手机号码 * @param phoneNumber 手机号码 * @return boolean */ ...
  • sfy666666
  • sfy666666
  • 2016年07月07日 15:44
  • 1855

常用正则表达式—邮箱(Email)

常用正则表达式—邮箱(Email)本文针对有一点正则基础的同学,如果你对正则一无所知,请移步“正则表达式30分钟入门教程”学习。要验证一个字符串是否为邮箱的话,首先要了解邮箱账号的格式。我尝试过在网上...
  • make164492212
  • make164492212
  • 2016年06月14日 17:48
  • 103224

页面表单验证(正则表达式验证邮箱,正则表达式验证身份证,正则表达式验证手机号)

var reg = { user:/^[a-zA-Z]\w{4,9}$/, pwd:/^[\da-zA-Z]{6,18}$/, tel:/^1[34578]\d{9}$/...
  • gl0ry
  • gl0ry
  • 2017年03月05日 21:43
  • 1385

js实现正则表达式验证邮箱

js实现正则表达式验证邮箱 //这个验证有问题,aa.123@123.com这样子的也能通过 function check(){ //验证账号是否合法 //验证规则:字母,数字,下...
  • cherishSpring
  • cherishSpring
  • 2016年06月29日 23:45
  • 21980

邮箱正则表达式及验证使用

邮箱正则表达式/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/ !/^([a-zA-Z0-9_-])+@([a-z...
  • hehuihh
  • hehuihh
  • 2018年01月11日 15:11
  • 25

电子邮件验证 正则表达式

电子邮件验证        正则表达式(regular expression, 常常缩写为RegExp) 是一种用特殊符号编写的模式,描述一个或多个文本字符串。使用正则表达式匹配文本的模式,...
  • x657032732
  • x657032732
  • 2015年04月02日 21:08
  • 3285
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:正则表达式验证用户名、邮箱、密码
举报原因:
原因补充:

(最多只允许输入30个字)