javascript表单账户密码校验提交

拼搏现实的明天。 2022-05-12 05:36 195阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		span{color: red;font-size: 12px;display: none;}
    	</style>
    	<script type="text/javascript">
    		/*
    			表单提交:
    				from 表单
    					action     目标页面的url      当提交成功时，跳转的目标页面
    					method     get   post     网络提交方式
    							例如：get    sucess.html?username='lili'&pwd='1231'
    								  post   sucess.html 
    
    					submit  提交
    					onsubmit    return 语句;     若返回值为true或者 ""  均可以提交
    			表单校验：
    		*/
    	</script>
    </head>
    <body>
    	<form action="sucess.html" method="post" onsubmit="return valForm()">
    		用户名:<input type="text" id="txt-name"><span id="tip-name">用户名必须为8-12为字母或数字</span><br>
    		密码：<input type="password" id="pwd"><span id="tip-pwd">密码必须为6位数字</span><br>	
    		<input type="submit" value="提交">
    	</form>
    
    	<script type="text/javascript">
    		//校验用户名密码是否合法
    		var iptName=document.getElementById('txt-name');
    		var iptPwd=document.getElementById('pwd');
    		var tipName=document.getElementById('tip-name');
    		var tipPwd=document.getElementById('tip-pwd');
    
    		//对用户名和密码进行校验
    		function valForm(){
    			return valUserName()&&valPwd();
    		}
    
    		//校验用户名
    		function valUserName() {
    			var p=/^\w\w{7,11}$/;//用户名必须为8-12为字母或数字
    			var r=p.test(iptName.value);//校验
    			if(!r){
    				//校验不通过
    				tipName.style.display='inline-block';//显示
    				iptName.focus();
    				return false;
    			}
    			return true;
    		}
    
    		//校验密码
    		function valPwd(){
    			var p=/^\d\d{5}$/;//6位数字
    			var r=p.test(iptPwd.value);//校验
    			if(!r){
    				tipPwd.style.display='inline-block';
    				iptPwd.focus();//获取焦点
    				return false;
    			}
    			return true;
    		}
    	</script>
    </body>
    </html>