正則驗證用戶名密碼

時間 2019-12-09
原文原文鏈接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>正則表達式做業.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#main {
    font-family:微軟雅黑;
	width: 1200px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

#header {
	height: auto;
}

#headerleft {
    height: 60px;
	float: left;
	width: 200px;
}

#headerright {
    margin-top: 30px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	float: right;
	overflow: hidden;
}
label{
    color:red;
    display: none;
}
hr{
  clear:both; 
  padding:0px;
  line-height:0px;
}
#form {
	width: 800px;
	margin: auto;
}

.inputs {
	width: 200px;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}
.buttons{
    font-size:15px;    
    padding: auto;
    height:27px;
    width:60px;
}
</style>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript">
	function check() {
		var username = $("#username").val();
		var pwd = $("#password1").val();
		var repwd = $("#password2").val();
		//用戶名格式驗證
		var regUsername=/^[a-zA-Z\xa0-\xff_][0-9a-zA-Z\xa0-\xff_]{7,14}$/;
		if (regUsername.test(username) == false) {
			$(function(){
			    $("#label1").show();
			  });
			return false;
		}else{
		$(function(){$("#label1").hide();});
		}
		//密碼格式驗證
		var regPwd=/^[0-9a-zA-Z\xa0-\xff_][0-9a-zA-Z\xa0-\xff_]{5,14}$/;
		if (regPwd.test(pwd) == "") {
			$(function(){
			    $("#label2").show();
			  });
			return false;
		}else{
		$(function(){$("#label2").hide();});
		}
		//先後密碼是否一致驗證
		if (repwd != pwd) {
			$(function(){
			    $("#label3").show();
			  });
			return false;
		}else{
		$(function(){$("#label3").hide();});
		}
		
		return true;
	}

	$(document).ready(function() {
		$("#myform").submit(function() {
			return check();
		});

	});
</script>
</head>
<body>
	<div id="main">
		<div id="header">
			<div id="headerleft">
				<h3>用戶註冊</h3>
			</div>
			<div id="headerright">登陸|註冊|幫助</div>
			<div><hr></div>
		</div>
		
		<div id="form">
			<form action="success.html" method="post" id="myform" name="myform">
				<table>
					<tr>
						<td class="right">用戶名：</td>
						<td><input type="text" id="username" class="inputs" value="" /></td>
						<td><label id="label1">用戶名不能少於8位，多於15位，開頭不能爲數字!</label></td>
					</tr>
					<tr>
						<td class="right">密碼：</td>
						<td><input type="password" id="password1" class="inputs" value="" /></td>
						<td><label id="label2">密碼不能少於6位，多於15位!</label></td>
					<tr>
						<td class="right" >確認密碼：</td>
						<td><input type="password" id="password2" class="inputs" value="" /></td>
						<td><label id="label3">先後密碼必須一致!</label></td>
					</tr>
					<tr>
						<td class="center" colspan="2"><input type="submit"
							value="登陸" id="sub" class="buttons" /></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</body>
</html>