webAPI3-9检测用户名和密码

最新推荐文章于 2022-08-31 15:00:36 发布

雨乐无穷

最新推荐文章于 2022-08-31 15:00:36 发布

阅读量386

点赞数

分类专栏： JavaScript学习笔记

JavaScript学习笔记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>检测用户名和密码 </title>
		<style type="text/css">
			.error{
			background-color: orangered;
		}
		input,button{
			margin: 0 auto;
		}
		</style>
		
	</head>
	<body>
		<input type="text"  id="txtUserName"  /><br />
		<input type="password"  id="txtPassWord"  /><br />
		<button id="login">登录</button>
		
		<script type="text/javascript">
//			用户名3-6位，密码4-8位

			var login = document.getElementById('login');
			login.onclick = function(){
				
				var txtUserName = document.getElementById('txtUserName');
				if(txtUserName.value.length < 3 || txtUserName.value.length > 6){
					txtUserName.className = 'error';
					return;
				}else{
					txtUserName.className = '';
				}
				
				var txtPassWord = document.getElementById('txtPassWord');
				if(txtPassWord.value.length < 4 || txtPassWord.value.length > 8){
					txtPassWord.className = 'error';
					return;
				}else{
					txtPassWord.className = '';
				}
				
//				alert('登录成功');
				console.log('登录成功');
			}
			
		</script>
	</body>
</html>

雨乐无穷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webAPI3-9检测用户名和密码

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>检测用户名和密码 </title> <style type="text/css"> .error{ background-color: orangered; } ...
复制链接

扫一扫