JavaScript表单验证_submit javascript 验证-CSDN博客

本文链接：https://blog.csdn.net/qq_48935847/article/details/121813880
当文本框失去鼠标的焦点时，判断文本框中的内容是否为空。用submit判断提交时各文本框中的内容是都符合条件，不符合条件文本框后面提示并文本框变红。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#home {
				height: 100px;
			}
		</style>
		<script>
			function a() {
				var numbercount = 0;
				var lettercount = 0;
				var user = document.getElementById("username").value;
				if (user == "") {
					document.getElementById("one").innerHTML = "用户名不能为空";
					return false;
				}
				if (user.length > 9) {
					document.getElementById("one").innerHTML = "长度不能超过10";
					return false;
				}
				var arr=user.split("");
				for (var i = 0; i < arr.length; i++) {
					arr[i] = arr[i].toLocaleLowerCase();
					if (arr[i] >= '0' && arr[i] <= '9') {
						numbercount++;
					} else {
						if (arr[i] >= 'a' && arr[i] <= 'z') {
							lettercount++;
						}
					}
				}
				if(numbercount==arr.length ||lettercount==arr.length){
					document.getElementById("one").innerHTML = "要用字母和数字混合";
				}
				if (numbercount + lettercount != arr.length) {
				document.getElementById("one").innerHTML = "要用字母和数字混合";
				} 
				}
			function b() {
				var pass = document.getElementById("password").value;
				var str = pass.split(",");
				if (pass == "") {
					document.getElementById("two").innerHTML = "密码不能为空";
					return false;
				}
				if (pass.length > 10) {
					document.getElementById("two").innerHTML = "长度不能超过10";
					return false;
				}
				for (var i = 0; i < str.length; i++) {
					if (isNaN(str[i])) {
						document.getElementById("two").innerHTML = "必须是数字";
						break;
					}
				}
			}
			function c() {
				var bir = document.getElementById("birday").value;
				var str1 = bir.split(",");

				if (bir == "") {
					document.getElementById("three").innerHTML = "出生年月不能为空";
					return false;
				}
				if (bir.length > 10) {
					document.getElementById("three").innerHTML = "长度不能超过10";
					return false;
				}
				for (var i = 0; i < str1.length; i++) {
					if (isNaN(str1[i])) {
						document.getElementById("three").innerHTML = "必须是数字";
						break;
					}

				}
			}
			function d() {
				var whe = document.getElementById("where").value;
				if (whe == "") {
					document.getElementById("four").innerHTML = "出生地不能为空";
					return false;
				}
			}
			function e() {

				var ho = document.getElementById("home").value;
				if (ho == "") {
					document.getElementById("five").innerHTML = "家庭住址不能为空";
					return false;
				}
				if (ho.length > 20) {
					document.getElementById("five").innerHTML = "长度不能超过20";
					return false;
				}
			}
			function coo() {
				var x = document.getElementsByName("hobby");
				var count = 0;
				for (var i = 0; i < x.length; i++) {
					if (x[i].checked) {
						count++;
					}
				}
				if (count == 0) {
					document.getElementById("six").innerHTML = "爱好不能为空";
					document.getElementById("six").style.color = "red";
				}

				var j = document.getElementsByName("sex");
				var sum = 0;
				for (var k = 0; k < j.length; k++) {
					if (j[k].checked) {
						sum++;
					}
				}
				if (sum == 0) {
					document.getElementById("seven").innerHTML = "性别不能为空";
					document.getElementById("seven").style.color = "red";
				}
				if (document.getElementById("username").value == "") {
					document.getElementById("username").style.backgroundColor = "red";
					document.getElementById("one").innerHTML = "用户名不能为空";
				}
				if (document.getElementById("password").value == "") {
					document.getElementById("password").style.backgroundColor = "red";
					document.getElementById("two").innerHTML = "密码不能为空";
				}
				if (document.getElementById("birday").value == "") {
					document.getElementById("birday").style.backgroundColor = "red";
					document.getElementById("three").innerHTML = "出生日期不能为空";
				}
				if (document.getElementById("where").value == "") {
					document.getElementById("where").style.backgroundColor = "red";
					document.getElementById("four").innerHTML = "出生地不能为空";
				}
				if (document.getElementById("home").value == "") {
					document.getElementById("home").style.backgroundColor = "red";
					document.getElementById("five").innerHTML = "家庭住址不能为空";
					return false;
				}
			}
			function color() {
				document.getElementById("one").style.color = "red";
				document.getElementById("two").style.color = "red";
				document.getElementById("three").style.color = "red";
				document.getElementById("four").style.color = "red";
				document.getElementById("five").style.color = "red";
			}
		</script>
	</head>
	<body onload="color()">
		<form name=form1 onsubmit="return coo()">
			用户名：<input type="text" name="username" id="username" onblur="a()" />
			<span id="one"></span>
			<br />
			密码：<input type="text" name="password" id="password" onblur="b()" />
			<span id="two"></span>
			<br />
			出生日期:<input type="text" name="birday" id="birday" onblur="c()">
			<span id="three"></span>
			<br />
			性别： <input type="radio" value="boy" name="sex">男
			<input type="radio" value="girl" name="sex">女
			<span id="seven"></span>
			<br />
			爱好：<input type="checkbox" value="smoke" name="hobby">抽烟
			<input type="checkbox" value="drink" name="hobby" />喝酒
			<input type="checkbox" value="head" name="hobby" />烫头
			<span id="six"></span>
			<br />
			出生地：<input type="txet" id="where" name="where" onblur="d()" />
			<span id="four"></span>
			<br />
			家庭住址：<input type="text" id="home" name="home" height="20px" width="10px" onblur="e()" />
			<span id="five"></span>
			<input type="submit" />
		</form>
	</body>
</html>