表单验证：
一、非空验证：
1、内容是不是空的。
判断值的长度是不是0。length属性。
2、内容是不是改变了。
二、对比验证：
1、验证两个控件值的关系（相同，大小）
2、验证控件的值与某个固定值的关系。
三、范围验证：
四、格式验证：
正则表达式。regularexpression
邮箱验证：（其他验证也是这个形式，只要把正则表达式换一下就可以）
function checkEmail()
{
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var txt = document.getElementById("txtEmail").value;
if(txt.match(reg) == null)
{
alert("邮箱格式不正确");
return false;
}
else
{
return true;
}
}
五、其它验证：
案例一、邮箱验证：
<body>
<form action="" method="get">
<table width="100%" border="1">
<tr>
<td width="20%" height="40" align="right">用户名:</td>
<td width="50%">
<input type="text" name="uid" id="uid" value="必填" style="color:#666" /></td>
<td width="30%"> </td>
</tr>
<tr>
<td height="40" align="right">密码：</td>
<td>
<input type="text" name="uid2" id="idpd1" /></td>
<td> </td>
</tr>
<tr>
<td height="40" align="right">确认密码：</td>
<td>
<input type="text" name="uid3" id="idpd2" /></td>
<td> </td>
</tr>
<tr>
<td height="40" align="right">邮箱：</td>
<td>
<input type="text" name="uid4" id="idemile" /></td>
<td> </td>
</tr>
</table>
<input type="submit" value="提交" onclick="return pp1()" />
</form>
<script language="javascript">
function onui()
{
var ui1=document.getElementById("uid").value;
if(ui1=="必填" || ui1.length=="0")
{
return "用户名不能为空\n";
}
else
{
return "";
}
}
function onpd()
{
var error2="";
var pd1=document.getElementById("idpd1").value;
if(pd1.length=="0")
{
error2+="密码不能为空\n";
}
var pd2=document.getElementById("idpd2").value;
if(pd2.length=="0")
{
error2+="确定密码不能为空\n";
}
if(pd1!=pd2)
{
error2+="两次密码输入不一致\n";
}
return error2;
}
function onemile()
{
var error3="";
var emile1=document.getElementById("idemile");
if(emile1.value.length=="0")
{
error3+="邮箱不能为空\n";
}
else
{
var reg=/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
if(emile1.value.match(reg)==null)
{
error3+="邮箱格式不正确\n";
}
}
return error3;
}
function pp1()
{
var allerror="";
allerror+=onui();
allerror+=onpd();
allerror+=onemile();
if(allerror.length==0)
{
return true;
}
else
{
alert(allerror);
return false;
}
}
</script>
</body>
案例二、微博输入140字，键盘或复制粘贴，输一个少一个。
<body>
<form action="" method="get">
<textarea name="aaa" cols="20px" id="aaa" rows="10" onmousedown="pp1()" onkeyup="pp1()"></textarea>
<div id="bbb">还可以输入140个字</div>
</form>
<script language="javascript">
function pp1()
{
var a1=document.getElementById("aaa").value;
var a2=document.getElementById("bbb");
var s=a1.length;
if(140-s>=0)
{
a2.innerHTML="还可以输入"+(140-s)+"个字";
window.setTimeout("pp1()",50);
}
else
{
a2.innerHTML="你输入的字以超出140字";
}
}
</script>
</body>
效果图：
案例三、必填：
<body>
<form action="" method="get">
<table width="100%" border="1">
<tr>
<td width="20%" height="40" align="right">用户名:</td>
<td width="50%">
<input type="text" name="uid" id="uid" value="必填" style="color:#999" onfocus="chuxian()" onblur="xiaoshi()" /></td>
<td width="30%"> </td>
</tr>
<tr>
<td height="40" align="right">密码：</td>
<td>
<input type="text" name="uid2" id="idpd1" /></td>
<td> </td>
</tr>
<tr>
<td height="40" align="right">确认密码：</td>
<td>
<input type="text" name="uid3" id="idpd2" /></td>
<td> </td>
</tr>
<tr>
<td height="40" align="right">邮箱：</td>
<td>
<input type="text" name="uid4" id="idemile" /></td>
<td> </td>
</tr>
</table>
</form>
<script language="javascript">
var yanse=document.getElementById("uid").style.color;
function chuxian()
{
var a=document.getElementById("uid");
if(a.value=="必填" && a.style.color==yanse)
{
a.value="";
a.style.color="black";
}
}
function xiaoshi()
{
var a=document.getElementById("uid");
if(a.value=="")
{
a.value="必填";
a.style.color="#999";
}
}
</script>
</body>
时间： 2024-10-22 03:57:40