<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证表单的长度</title>
</head>
<body>
<style>
table,tr,td{border: 1px solid #ddd;}
label {color: red; font-size: 12px; display:inline-block; 180px;}
</style>
<mark>当键盘上的按键被释放的时候触发事件onKeyUp</mark><br />
<table cellpadding="10" cellspacing="0">
<tr>
<td>账号：</td>
<td>
<input id="txt" type="text" placeholder="请输入您的账号">
<label id="labtxt"></label>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input id="pas" type="password" />
<label id="labpas"></label>
</td>
</tr>
</table>
<script>
var texta=document.getElementById("txt");
var pas=document.getElementById("pas");
var labtxt=document.getElementById("labtxt");
var labpas=document.getElementById("labpas");
texta.onfocus=function(){
texta.setAttribute("placeholder"," ");
texta.style.outline="none";
if(!texta.vlue){
labtxt.innerHTML="不能为空";
labtxt.style.color="red";
}
}
texta.onblur=function(){
texta.setAttribute("placeholder","请输入您的账号");
}
texta.onkeyup=function(){
if(texta.value.length<=6){
labtxt.innerHTML="账户必须大于6个字符";
labtxt.style.color="red";
}else if(texta.value.length>6){
labtxt.innerHTML="输入正确";
labtxt.style.color="turquoise";
}
}
pas.onfocus=function(){
if(!pas.value){
labpas.innerHTML="不能为空";
labpas.style.color="red";
}
}
pas.onkeyup=function(){
if(pas.value.length<=6){
labpas.innerHTML="密码必须大于6个字符";
labpas.style.color="red";
}else if(pas.value.length>6){
labpas.innerHTML="输入正确";
labpas.style.color="turquoise";
}
}
</script>
</body>
</html>
