原生js表单校验与图片切换-优快云博客

本文链接：https://blog.youkuaiyun.com/a17151314/article/details/109890653

1.基本表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Js表单校验</title>
	</head>
	<script type="text/javascript">
		function checkUsername() {
			//获取到表单中username的值,span
			var username = document.getElementById("username").value;
			var uspan = document.getElementById("uspan");
			//正则表达式规范格式/^  $/
			var reg = /^[A-Za-z0-9]{4,16}$/;
			//测试判断是否满足正则
			if (reg.test(username)) {
				uspan.innerHTML = "恭喜啊,用户名可用".fontcolor("green");
				return true;
			} else {
				uspan.innerHTML = "你的用户名太受欢迎了,请重新输入".fontcolor("red");
				return false;
			}
		}

		function checkPassword() {
			//获取到表单中password的值,span
			var password = document.getElementById("password").value;
			var pspan = document.getElementById("pspan");
			//正则表达式规范格式/^  $/
			var reg = /^[A-Za-z0-9]{6,30}$/;
			//测试判断是否满足正则
			if (reg.test(password)) {
				pspan.innerHTML = "密码可用".fontcolor("green");
				return true;
			} else {
				pspan.innerHTML = "密码不可用".fontcolor("red");
				return false;
			}
		}

		function checkRepassword() {
			//获取到表单中password,repassword的值,span
			var password = document.getElementById("password").value;
			var rpspan = document.getElementById("rpspan");
			var repassword = document.getElementById("repassword").value;

			//测试判断是否相等
			if (password == repassword) {
				rpspan.innerHTML = "密码一致".fontcolor("green");
				return true;
			} else {
				rpspan.innerHTML = "密码不一致".fontcolor("red");
				return false;
			}
		}

		function checkEmail() {
		
			//获取到表单中email的值,span
			var email = document.getElementById("email").value;
			var espan = document.getElementById("espan");
			//正则表达式规范格式/^  $/
			var reg = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[a-z]{2,3}){1,2}$/;
			//测试判断是否满足正则
			if (reg.test(email)) {
				espan.innerHTML = "邮箱可用".fontcolor("green");
				return true;
			} else {
				espan.innerHTML = "邮箱不可用".fontcolor("red");
				return false;
			}	
		}
		
		function checkAll(){
			if(checkUsername()&&checkPassword&&checkRepassword()&&checkEmail()){
				return true;
			}else{
				alert("请重新登录");
				return false;
			}
		}
	</script>
	<body>

		<form action="index.html" method="get" onsubmit="return checkAll()">
			用户名<input type="text" name="username" id="username" onblur="checkUsername()" placeholder="请输入用户名" />

			<!-- 用span做失去焦点后的提示信息 -->
			<span id="uspan"></span><br />

			密&nbsp;&nbsp;码 <input type="password" name="password" id="password" onblur="checkPassword()" placeholder="请输入密码" />
			<span id="pspan"></span><br />

			确认密码<input type="password" name="repassword" id="repassword" onblur="checkRepassword()" placeholder="请确认密码" />
			<span id="rpspan"></span><br />

			电子邮箱<input type="email" name="email" id="email" onblur="checkEmail()" placeholder="请输入邮箱" />
			<span id="espan"></span><br />
			<input type="submit" value="提交" />
		</form>

	</body>
</html>

在这里插入图片描述

2.图片按钮切换,定时器变换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换/定时</title>
		<style type="text/css">
			img {
				width: 400px;
				height: 300px;
			}
		</style>
		<script type="text/javascript">
			var index = 0;

			function change() {
				var img = document.getElementById("img");
				var btn = document.getElementsByTagName("button");
				var path = ["img/1.jpg", "img/2.jpg", "img/3.jpg"];
				index++;
				if (index == path.length) {
					index = 0;
				}
				img.src = path[index];
			}
			window.setInterval("change()", 2000);
		</script> -->
	</head>
	<body onunload="change()">
		<center><img src="img/1.jpg" id="img" /></center>
		<center><button>上一张</button></center>
		<center><button>下一张</button></center>
	</body>
	<script type="text/javascript">
		var img = document.getElementById("img");
		var btn = document.getElementsByTagName("button");
		var path = ["img/1.jpg", "img/2.jpg", "img/3.jpg"];
		var index = 0;

		btn[0].onclick = function() {
			index--;
			if (index == -1) {
				index = path.length - 1;
			}
			img.src = path[index];
		};
		btn[1].onclick = function() {
			index++;
			if (index > path.length - 1) {
				index = 0;
			}
			img.src = path[index];
		}
	</script>
</html>