JS——文本框验证

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<span>用户名称：</span>
	<input type="text" id="uname" onfocus="unameTip1()" onblur="unameTip2()">
	<span id="uname_tip"></span><br/>

	<span>用户密码：</span>
	<input type="password" id="upwd" onfocus="upwdTip1()" onblur="upwdTip2()">
	<span id="upwd_tip"></span><br/>

	<span>重复密码：</span>
	<input type="password" id="cpwd" onblur="cpwdTip()">
	<span id="cpwd_tip"></span>

	<script>
		//1、文本框获取焦点时，提示，用户名称6-18位
		//2、文本框失去焦点时，判断，用户名称是否为空并给出相应提示(用户名不能为空/通过)
		//3、upwd获取焦点时，提示，密码6-18位
		//4、upwd失去焦点时，判断，密码是否为空并给出提示(参考文本框提示)
		//5、cpwd失去焦点时，判断 cpwd的值是否与 upwd的值一致，并给出提示(通过/两次密码输入不一致)
		function $(id) {
			return document.getElementById(id);
		}

		function unameTip1() {
			$("uname_tip").innerHTML = "用户名称6-18位";
		}

		function unameTip2() {
			if($("uname").value == "") {
				$("uname_tip").innerHTML = "用户名不能为空";
			}else{
				$("uname_tip").innerHTML = "通过";
			}
		}

		function upwdTip1() {
			$("upwd_tip").innerHTML = "密码6-18位";
		}

		function upwdTip2() {
			if($("upwd").value == "") {
				$("upwd_tip").innerHTML = "密码不能为空";
			}else{
				$("upwd_tip").innerHTML = "通过";
			}
		}

		function cpwdTip() {
			if($("cpwd").value == "") {
				$("cpwd_tip").innerHTML = "不能为空";
			}else if(($("upwd").value !== $("cpwd").value)) {
				$("cpwd_tip").innerHTML = "两次密码输入不一致";
			}else{
				$("cpwd_tip").innerHTML = "通过";
			}
		}


	</script>
</body>
</html>