快速制作表单验证
效果图如下：
思路分析：
//1、当页面加载完成后获取标签对象
//2、获取username和uSpan的标签对象
//3、当username获取焦点时提示
//4、在SPAN标签写入提示信息
//5、当username失去焦点时提示
//6、获取username的VALUE值// 获取username的VALUE值的长度
//7、根据username的VALUE值的长度，判断用户名不能为空
//8、根据username的VALUE值的长度，判断用户名是否超出界限
HTML代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>formCheck</title>
<style type="text/css">
</style>
<script type="text/javascript" src="formCheck.js"></script>
<style type="text/css">
#register_check{
width: 400px;
height: 200px;
margin:100px auto;
}
#register_check input{
margin-top: 20px;
height: 25px;
}
#register_check span{font-size: 12px;}
#sub{
background-color: #006633;
border: none;
width: 80px;
color: #fff;
margin-left: 20%;
}
</style>
</head>
<body>
<form id="register_check" action="bgColor.html">
账号：<input type="text" id="username" name="username" placeholder="请输入用户名！" /><span id="uSpan"></span><br />
密码：<input type="password" name="password" id="password" placeholder="请输入密码！" /><span id="pSpan"></span><br />
<input id="sub" type="submit" value="注册">
</form>
</body>
</html>
JS代码如下：
window.onload=function(){
var username=document.getElementById('username');
var uSpan=document.getElementById('uSpan');
//当username获取焦点时提示
username.onfocus=function(){
uSpan.innerHTML='请输入用户名！';
uSpan.style.color='#ccc';
}
//当username失去焦点时提示
username.onblur=function(){
var uValue=username.value;
var uValueLen=uValue.length;
if(uValueLen==0){
uSpan.innerHTML='用户名不能为空！';
uSpan.style.color='#f00';
return false;
}else if(uValueLen<6||uValueLen>10){
uSpan.innerHTML='请输入6-10位用户名！';
uSpan.style.color='#f00';
return false;
}else if(checkStr(uValue)){
uSpan.innerHTML='用户名含有特殊字符！';
uSpan.style.color='#f00';
return false;
}else{
uSpan.innerHTML='用户名输入正确！';
uSpan.style.color='#0f0';
return true;
}
}
//当password获取焦点时提示
var password=document.getElementById('password');
var pSpan=document.getElementById('pSpan');
password.onfocus=function(){
pSpan.innerHTML='请输入密码！';
pSpan.style.color='#ccc';
}
//当password失去焦点时提示
password.onblur=function(){
var pValue=password.value;
var pValueLen=pValue.length;
if(pValueLen==0){
pSpan.innerHTML='密码不能为空！';
pSpan.style.color='#f00';
return false;
}else if(pValueLen>10||pValueLen<4){
pSpan.innerHTML='请输入4-10位密码！';
pSpan.style.color='#f00';
return false;
}else{
pSpan.innerHTML='密码合法！';
pSpan.style.color='#0f0';
return true;
}
}
var regsCheckObj=document.getElementById('register_check');
regsCheckObj.onsubmit=function(){
var uReturn=username.onblur();
var pReturn=password.onblur();
if(uReturn&&pReturn){
return true;
}else{
return false;
}
}
}
function checkStr(str){
var arr=['!','@','#','%'];
var arrLen=arr.length;
var strLen=str.length;
for(var i=0;i<arrLen;i++){
for(var j=0;j<strLen;j++){
if(str.charAt(j)==arr[i]){
return true;
}
}
}
return false;
}