<!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>
原文：https://www.cnblogs.com/yaobiluo/p/13200204.html