js用户名密码验证

最新推荐文章于 2024-07-15 10:47:23 发布

小白style

最新推荐文章于 2024-07-15 10:47:23 发布

阅读量2.9w

点赞数 15

分类专栏： JavaSctipt

本文链接：https://blog.csdn.net/weixin_43076899/article/details/82778623

版权

JavaSctipt 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

<!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>