<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById("frm").onsubmit=function(){
if(document.getElementById("uname-show").innerHTML=="√"){
return true;
}else{
return false;
}
}
document.getElementById("uname").onfocus = function(){
document.getElementById("uname-show").innerHTML="用户名必须6-18位"
}
document.getElementById("uname").onblur = function(){
if(this.value.length>=6&&this.value.length<=18){
document.getElementById("uname-show").innerHTML="√";
}else{
document.getElementById("uname-show").innerHTML="×";
}
}
}
</script>
</head>
<body>
<form action="/login/" id="frm">
<p>
用户名称:<input type="text" name="uname" id="uname">
<span id="uname-show"></span>
</p>
<p>
用户密码:<input type="password" name="upwd">
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
注:此处只做了用户名称输入框的验证,用户密码的验证同理即可