您的位置：首页 > Web前端 > JavaScript

用JavaScript来实现一些简单的控件验证

2010-05-27 15:29 543 查看

页面一：

<html>
<head>
<title> 验证与提交一 </title>

<script>
function focusSelect(ID) //当验证不能通过时获得验证控件的焦点和内容
{
document.getElementById(ID).focus();
document.getElementById(ID).select();
}

function txtNameOnBlur() //对用户名的所有验证
{
var txt=document.getElementById("txtName").value;
if(txt=="")
{
document.getElementById("fName").innerHTML="*";
//focusSelect('txtName');
return false;
}else
{
if(isNaN(txt))
{
document.getElementById("fName").innerHTML="用户名必须是数字!";
//focusSelect('txtName');
return false;
}else
if(txt.length!=10)
{
document.getElementById("fName").innerHTML="用户名必须是10位";
//focusSelect('txtName');
return false;
}else
if(txt.substr(txt.length-3,txt.length+1) != "321")
{
document.getElementById("fName").innerHTML="用户名后3位必须是321!";
//focusSelect('txtName');
return false;
}
}
return true;
}

function txtNameOnFocus() //当获得焦点时对此文本框所做的动作
{
var txt=document.getElementById("txtName").value;
if(txt=="*******321")
{
document.getElementById("txtName").value="";
}
}

function pwdOnBlur() //对密码进行判断的方法
{
var pwd1=document.getElementById("txtPwd1").value;
var pwd2=document.getElementById("txtPwd2").value;
if(pwd1.length != 0 && pwd2.length != 0)
{
if(pwd1 != pwd2)
{
document.getElementById("fPwd").innerHTML="您两次输入的密码不一样";
//focusSelect('txtPwd2');
return false;
}
}else
{
document.getElementById("fPwd").innerHTML="*";
document.getElementById("fPwd2").innerHTML="*";
return false;
}
return true;
}

function emailOnBlur() //对邮箱格式进行验证的方法
{
var str = document.formOne.txtEmail.value;
if(str.length != 0)
{
if(str.indexOf("@") != -1 && str.indexOf(".") != -1)
{
return true;
}
else
{
document.getElementById("fEmail").innerHTML="邮箱正确格式应为：";
//focusSelect('txtEmail');
return false;
}
}
else
{
document.getElementById("fEmail").innerHTML="*";
//focusSelect('txtEmail');
return false;
}
return true;
}

function funIsTrue() //对所有验证的方法的返回值作判断，完全通过验证就可以提交成功，否则失
{
var str1=txtNameOnBlur();
var str2=pwdOnBlur();
var str3=emailOnBlur();
if((!str1 && !str2 && !str3) || (!str1 && str2 && str3) || (!str1 && str2 && !str3)) //判断是否应该将光标焦点放在用户名上
{
focusSelect('txtName');
return false;
}else
if((str1 && !str2 && !str3) || (str1 && !str2 && str3)) //判断是否应该将光标焦点放在密码框上
{
focusSelect('txtPwd1');
return false;
}else
if(str1 && str2 && !str3) //判断是否应该将光标焦点放在邮箱框上
{
focusSelect('txtEmail');
return false;
}else
if(str1 && str2 && str3) //判断是否可以跳转页面
{
return true;
}
return false;
}

</script>
</head>
<body>
<form name="formOne" action="2.html" onsubmit="return funIsTrue()">
<center><br/><br/><br/><br/>
<table>
<tr><td>账号：</td><td><input type="textBox" id="txtName" value="*******321" onBlur="txtNameOnBlur()" onFocus="txtNameOnFocus()"> </td><td> <font color="red" id="fName"></font></td></tr>
<tr><td> 密码：</td><td><input type="password" id="txtPwd1"> </td><td> <font color="red" id="fPwd"></font></td></tr>
<tr><td> 确认密码：</td><td><input type="password" id="txtPwd2" onBlur="pwdOnBlur()"> </td><td> <font color="red" id="fPwd2"></font></td></tr>
<tr><td> 电子邮箱：</td><td> <input type="textBox" id="txtEmail" onBlur="emailOnBlur()"></td><td> <font color="red" id="fEmail"></font></td></tr>
</table>
<input type="submit" value="提交" >
</center>
</form>
</body>
</html>
页面二：

<html>
<head>
<title> 验证与提交二 </title>
<script>
function fun()
{
document.getElementById("time").innerHTML -= 1;
var t=setTimeout("fun()",1000);
if(document.getElementById("time").innerHTML==0)
{
clearTimeout(t);
location.href="1.html"; //自动页面跳转
}
}
</script>
</head>

<body onload="fun()">
<h1 id="hId">您的内容通过验证，欢迎您来到这里。</h1><br/><br/><br/>
您将在<font id="time" color="red" size="5">5</font>秒钟后回到注册页面，如果不能自动跳转请点击此按钮：<input type="button" value="回到注册页面" onclick="location.href='1.html'">
</body>
</html>
您可以新建一个文本框将上面两个页面的内容复制上去并将后缀名改为".html"就可以正常运行。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航