妖碧落

导航

js02-表单 实时校验 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function showTips(spanId,msg){
				var span1 = document.getElementById(spanId)
				span1.innerHTML = msg
				span1.style.display = ""
			}
			function checkUsrName(){
				var uValue = document.getElementById("username").value
				var span1 = document.getElementById("span_username")
				if(uValue.length < 6){
					span1.innerHTML = "<font color='red' size='2'>对不起，用户名太短</font>"
					span1.style.display = ""
				}else{
					span1.innerHTML = "<font color='green' size='2'>用户名可用</font>"
					span1.style.display = ""
				}				
			}
			function checkPassword(){
				var vPass = document.getElementById("password").value
				var span2 = document.getElementById("span_password")
				if(vPass.length < 6){
					span2.innerHTML = "<font color='red' size='2'>对不起，密码长度太短</font>"
					span2.style.display = ""
				}else{
					span2.innerHTML = "<font color='green' size='2'>密码可用</font>"
					span2.style.display = ""
				}			
			}
			function init(){
				
			}
			function checkForm(){
				
				return false
			}
		</script>
	</head>
	<body onload="init()">
		<form action="01-自动切换图片.html" onsubmit="return checkForm()">
			用户名：<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsrName()" onkeyup="checkUsrName()"/><span id="span_username" style="display:none">  提示用户名相关信息</span> <br />
			密码：<input type="password" id="password" onfocus="showTips('span_password','长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/> <span id="span_password" style="display:none">  提示用户名相关信息</span><br />
			确认密码：<input type="password" id = "repassword"/><br />
			手机号：<input type="password" id="phoneNum"/><br />
			邮箱：<input type="email" /><br />
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

　　

posted on 2020-06-27 22:14  妖碧落  阅读(192)  评论(0)  编辑  收藏  举报