正则表达式基础运用

最新推荐文章于 2025-10-03 19:33:51 发布
原创最新推荐文章于 2025-10-03 19:33:51 发布 · 308 阅读
0 ·
CC 4.0 BY-SA版权
笔记专栏收录该内容
32 篇文章
订阅专栏
验证表单
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>正则表单验证</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.divb{
				/*width: 100%;*/
				height: 100%;
				background: url(images/1503471852340.jpg) no-repeat;
				-webkit-background-size: 100% 100%;
				background-size: 100% 100%;
				margin:20px auto;
				overflow: hidden;
			}
			.divs{
				width: 550px;
				height: 500px;
				border: 1px solid #999999;
				margin: 200px auto;
				background-color: rgba(255,255,255,0.3);
				border-radius: 10px;
			}
			table{
				border-collapse: collapse;
				box-sizing:border-box;
				border: 0px solid rgba(255,255,255,0);
				margin: 0 auto;
			}
			
			.tdd1,.tdd2{
				
				height: 50px;
				padding: 10px 0px;
				
				
			}
			.tdd{
				height: 50px;
				/*margin-bottom: 20px;*/
				text-align: center;
				font:bold 24px "微软雅黑";
				
			}
			.tdd1{
				width: 100px;
				text-align: right;
				font-weight: bold;
			}
			.tdd2{
				width: 450px;
				text-align: center;
			}
			
			input{
				width: 360px;
				height: 35px;
				padding: 5px 10px; 
				font:bold 16px "微软雅黑";
				outline: none;
				border: 1px solid #000;
				background-color: rgba(255,255,255,0.6);
			}
			#button{
				width: 150px;
				height: 50px;
				margin-top: 10px;
				border: 0px;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div class="divb">
			<div class="divs">
				<form action="" method="get">
					<table border="" cellspacing="" cellpadding="">
						<tr class="trr">
							<td class="tdd" colspan="2">用户注册</td>
						</tr>
						<tr class="trr">
							<td class="tdd1">用户名：</td>
							<td class="tdd2"><input id="user" type="text" value="" placeholder="请输入用户名"/></td>
						</tr>
						<tr class="trr">
							<td class="tdd1">密码：</td>
							<td class="tdd2"><input id="psw1" class="psw" type="password" value="" placeholder="请输入密码"/></td>
						</tr> 
						<tr class="trr">
							<td class="tdd1">确认密码：</td>
							<td class="tdd2"><input id="psw2" class="psw" type="password" value="" placeholder="请再次输入密码"/></td>
						</tr>
						<tr class="trr">
							<td class="tdd1">手机号：</td>
							<td class="tdd2"><input type="tel" id="tel" placeholder="请输入手机号"/></td>
						</tr>
						<tr class="trr">
							<td class="tdd1">电子邮件：</td>
							<td class="tdd2"><input type="email" id="email" value="" placeholder="请输入电子邮箱"/></td>
						</tr>
						<tr class="trr">
							<!--<td class="tdd1"></td>-->
							<td class="tdd2" colspan="2"><input type="submit" id="button" value="注       册" /></td>
						</tr>
						<tr class="trr">
							<td class="tdd1"></td>
							<td class="tdd2"></td>
						</tr>
						<tr class="trr">
							<td class="tdd1"></td>
							<td class="tdd2"></td>
						</tr>	
					</table>
					
					
					
				</form>
			</div>
		</div>
		
		
		
		
		
		<script type="text/javascript">
			var formreg = /^[a-zA-Z][a-zA-Z0-9]{5,14}$/g;
			var pswmreg = /^[a-zA-Z][\/\*\.\_]{5,11}$/g;
			var telreg = /^1[356789][0-9]{9}$/g;
			var emailreg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+[\.][a-zA-Z]{2,4}$/g;
			var inp = document.getElementsByTagName("input");

			inp[0].onfocus = function(){
				formreg.lastIndex = 0;
				inp[0].placeholder = "";
			}
		
			inp[0].onblur = function(){
				if(formreg.test(inp[0].value)){
					
					inp[0].style.outline = "1px solid #3f97ff";
				}else if(inp[0].value == ""){
					inp[0].placeholder = "请输入用户名";
					inp[0].style.outline = "1px solid #f00";
				}else{
					inp[0].style.outline = "1px solid #f00";
				}
			}
			inp[1].onfocus = function(){
				pswmreg.lastIndex = 0;
				inp[1].placeholder = "";
				
			}
			inp[1].onblur = function(){
				if(pswmreg.test(inp[1].value)){
					
					inp[1].style.border = "1px solid #3f97ff";
				}else if(inp[1].value == ""){
					inp[1].placeholder = "请输密码";
					inp[1].style.border = "1px solid #f00";
				}else{
					inp[1].placeholder = "请输密码";
					inp[1].style.border = "1px solid #f00";
				}
			}
			inp[2].onfocus = function(){
				pswmreg.lastIndex = 0;
				inp[2].placeholder = "";
				
			}
			inp[2].onblur = function(){
				if(inp[2].value == inp[1].value && inp[2].value != ""){
					inp[2].style.border = "1px solid #3f97ff";
				}else if(inp[2].value == ""){
					inp[2].placeholder = "请再次输入密码";
					inp[2].style.border = "1px solid #f00";
				}else{
					inp[2].style.border = "1px solid #f00";
					alert("两次密码输入不一致");
				}
			}
			
			inp[3].onfocus = function(){
				telreg.lastIndex = 0;
				inp[3].placeholder = "";
				
			}
			inp[3].onblur = function(){
				if(telreg.test(inp[3].value)){
					
					inp[3].style.border = "1px solid #3f97ff";
				}else if(inp[3].value == ""){
					inp[3].placeholder = "请输入手机号";
					inp[3].style.border = "1px solid #f00";
				}else{
					inp[3].style.border = "1px solid #f00";
				}
			}
			
			inp[4].onfocus = function(){
				emailreg.lastIndex = 0;
				inp[4].placeholder = "";
			}
			inp[4].onblur = function(){
				if(emailreg.test(inp[4].value)){
					inp[4].style.border = "1px solid #3f97ff";
				}else if(inp[4].value == ""){
					inp[4].placeholder = "请输入电子邮箱";
					inp[4].style.border = "1px solid #f00";
				}else{
					inp[4].style.border = "1px solid #f00";
				}
			}
		</script>
		
	</body>
</html>