表单验证：
一、非空验证： 1、内容是不是空的。 判断值的长度是不是0。length属性。
2、内容是不是改变了。
二、对比验证： 1、验证两个控件值的关系（相同，大小）
2、验证控件的值与某个固定值的关系。
三、范围验证：
四、格式验证： 正则表达式。regularexpression
字符
描述
\ 标记下一个字符是特殊字符或文字。例如，"n" 和字符 "n" 匹配。"\n" 则和换行字符匹配。序列 "\\" 和 "\" 匹配，而 "\(" 则和 "(" 匹配。
^ 匹配输入的开头。
$ 匹配输入的末尾。
* 匹配前一个字符零或多次。例如，"zo*" 与 "z" 或 "zoo" 匹配。
+ 匹配前一个字符一次或多次。例如，"zo+" 与 "zoo" 匹配，但和 "z" 不匹配。
? 匹配前一个字符零或一次。例如，"a?ve?" 和 "never" 中的 "ve" 匹配。
. 匹配除换行字符外的任何单个字符。
(pattern) 匹配 pattern 并记住该匹配。匹配上的子字符串，可以使用 Item [0]...[n]，来从生成的 Matches 集合中取回。要匹配圆括号字符 ( )，则需使用 "\(" 或 "\)"。
x|y 匹配 x 或 y。例如，"z|food" 和 "z" 或 "food" 匹配。"(z|f)ood" 匹配 "zoo" 或 "food"。
{n} n 是非负整数。共匹配 n 次。例如，"o{2}" 和 "Bob" 中的 "o" 不匹配，但和 "foooood" 中的前两个 o 匹配。
{n,} n 是一个非负整数。至少匹配 n 次。例如，"o{2,}" 和 "Bob" 中的 "o" 不匹配，但和 "foooood" 中的所有 o 匹配。"o{1,}" 与 "o+" 等效。"o{0,}" 和 "o*" 等效。
{n,m} m 和 n 是非负整数。至少匹配 n 次而至多匹配 m 次。例如，"o{1,3}" 和 "fooooood" 中的前三个 o 匹配。"o{0,1}" 和 "o?" 等效。
[ xyz] 字符集合。匹配括号内的任一字符。例如，"[abc]" 和 "plain" 中的 "a" 匹配。
[^xyz ] 否定字符集合。匹配非括号内的任何字符。例如，"[^abc]" 和 "plain" 中的 "p" 匹配。
[a-z] 字符范围。和指定范围内的任一字符匹配。例如，"[a-z]" 匹配 "a" 到 "z"范围内的任一小写的字母表字符。
[^m-z] 否定字符范围。匹配不在指定范围内的任何字符。例如，"[m-z]" 匹配不在 "m" 到 "z"范围内的任何字符。
\b 匹配字的边界，也就是说，在字和空格之间的位置。例如，"er\b" 和 "never" 中的 "er" 匹配，但和 "verb" 中的 "er" 不匹配。
\B 匹配非字边界。"ea*r\B" 和 "never early" 中的 "ear" 匹配。
\d 匹配数字字符。等价于 [0-9]。
\D 匹配非数字字符。等价于 [^0-9]。
\f 匹配换页字符。
\n 匹配换行字符。
\r 匹配回车符字符。
\s 匹配任何空白，包括空格、制表、换页等。与 "[ \f\n\r\t\v]" 等效。
\S 匹配任何非空白字符。与 "[^ \f\n\r\t\v]" 等效。
\t 匹配制表字符。
\v 匹配垂直制表符。
\w 匹配包括下划线在内的任何字字符。与 "[A-Za-z0-9_]" 等效。
\W 匹配任何非字字符。与 "[^A-Za-z0-9_]" 等效。
\num 匹配 num，其中 num 是一个正整数。返回记住的匹配的引用。例如，"(.)\1" 匹配两个连续的同一字符。
\n 匹配 n，其中 n 是八进制换码值。八进制换码值必须是 1、2、或 3 位长。例如，"\11" 和 "\011" 都匹配制表字符。"\0011" 和 "\001" & "1" 是等效的。八进制换码值必须不超过 256。如果超过了，则只有前两位组成表达式。允许在正则表达式中使用 ASCII 码。
\xn 匹配 n，其中 n 是十六进制换码值。十六进制换码值必须正好是两位长。例如，"\x41" 与 "A" 匹配。"\x041" 和 "\x04" & "1" 是等效的。允许在正则表达式中使用 ASCII 码。
邮箱验证：（其他验证也是这个形式，只要把正则表达式换一下就可以）
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-12-04 19:03:49