简单用户登录（2）

心已赠人 2022-09-19 12:06 163阅读 0赞

<html>
    	<head>
    		<title>简单的用户登录</title>
    		
    		<script>
    		
    			//用户名的规则,6个字母,i代表忽略大小写
    			var usernameRegx = /^[a-z]{6}$/i;
    			//密码的校验，6-12位的字母数字或者下划线
    			var passwordRegx = /^\w{6,12}$/;
    			
    			/*
    			校验用户名username
    			*/
    			function checkUsername(n){
    				var flag = false;
    				
    				var usernameNode = n;
    				var username = usernameNode.value;
    				
    				//alert(username);
    				
    				var usernameSpanNode = document.getElementById("username_span");
    				if(!usernameRegx.test(username)){
    					
    					usernameSpanNode.style.display = "inline";
    					flag = false;
    		
    				}
    				else
    				{
    					usernameSpanNode.style.display = "none";
    					flag = true;
    				
    				}
    				
    				return flag;
    			}
    			
    			/*
    				校验密码password
    			*/
    			function checkPassword(p){
    			
    				var flag = false;
    			
    				var passwordNode = p;
    				password = passwordNode.value;
    				
    				var passwordSpanNode = document.getElementById("password_span");
    				
    				if(!passwordRegx.test(password)){
    					
    					passwordSpanNode.style.display = "inline";
    					flag = false;
    					
    				}else{
    					passwordSpanNode.style.display = "none";
    					
    					flag = true;
    				}
    				
    				return flag;
    			}
    			
    			/*
    			提交表单
    			*/
    			function validateForm(){
    			
    			/*
    				var flag = true;
    			
    				//获取用户名
    				var usernameNode = document.getElementById("username");
    				var username = usernameNode.value;
    				//alert(username);
    				
    				var usernameSpanNode = document.getElementById("username_span");
    				var passwordSpanNode = document.getElementById("password_span");
    				
    				if("" == username){
    					//alert("用户名不能为空！！");
    					flag = false;
    					usernameSpanNode.style.display = "inline";
    					usernameNode.focus();
    					
    				}else{
    					usernameSpanNode.style.display = "none";
    				}
    				
    				var passwordNode = document.getElementById("password");
    				var password = passwordNode.value;
    				
    				if("" == password){
    					flag = false;
    					passwordSpanNode.style.display = "inline";
    					passwordNode.focus();
    					
    				}else{
    					passwordSpanNode.style.display = "none";
    				}
    				return flag;
    				
    				*/
    				
    				var usernameNode = document.getElementById("username");
    				var passwordNode = document.getElementById("password");
    				
    				if(checkUsername(usernameNode) && checkPassword(passwordNode) ){
    					return true;
    				}else{
    					return false;
    				}
    				
    				
    				
    			}
    			
    	
    			
    			
    		</script>
    		
    		<style>
    			span{
    				display:none;
    			}
    		</style>
    		
    	</head>
    	
    	<body>
    	
    		<form action="" method="post" οnsubmit="return validateForm()">
    			<table border="1" align="center" width="40%" cellspacing="0">
    				<caption>简单用户登录</caption>
    				<tr>
    					<td align="right" width="30%">用户名:</td>
    					<td width="70%"><input type="text" name="username" id="username"  οnblur="checkUsername(this)"><span id="username_span">用户名必须为6位字母！！</span></td>
    				</tr>
    				<tr>
    					<td align="right" width="30%">密码：</td>
    					<td width="70%"><input type="password" name="password" id="password"  οnblur="checkPassword(this)"><span id="password_span">密码必须为6-12为字母数字或者下划线！！</span></td>
    				</tr>
    				<tr >
    					<td colspan="2" align="center">
    						<input type="submit" value="登录">
    						<input type="reset" value="重置">
    					</td>
     				</tr>
    			</table>
    		</form>
    	
    	</body>
    </html>