一個簡單的驗證列子,代碼如下:
<html>
<head>
<title>正則表達式驗證表單</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.valid{color:green;}
.invalid{color:red;}
</style>
</head>
<body>
<h2>表單驗證</h2>
<form method="POST" οnsubmit="return checkForm(this)">
用戶名:<input type="text" name="uname" /><i>5-15個字母,數字,下劃線,不能以字母開頭</i><br>
QQ:<input type="text" name="qq" /><i>5-12位QQ號</i><br>
Email:<input type="text" name="email" /><i>正確的電子郵箱</i><br>
<input type="submit" name="sub" value="提交"/><br>
</form>
<p id="info"></p>
</body>
</html>
<script>
function checkForm(myForm){
var info = document.getElementById("info");
info.innerHTML = "";
//驗證用戶名
var re = /^[a-zA-Z_][0-9a-zA-Z_]{4,14}$/;
var val = myForm.uname.value;
if(!re.test(val))
{
info.innerHTML += "<span class='invalid'>用戶名["+val+"]不合法</span><br>";
}
else
{
info.innerHTML += "<span class='valid'>用戶名["+val+"]合法</span><br>";
}
//驗證qq號
re = /^[1-9][0-9]{4,11}$/;
val = myForm.qq.value;
if(!re.test(val))
{
info.innerHTML += "<span class='invalid'>QQ號["+val+"]不合法</span><br>";
}
else
{
info.innerHTML += "<span class='valid'>QQ號["+val+"]合法</span><br>";
}
//驗證EMAIL
re = /^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+\.[a-zA-Z]+(\.[a-zA-Z]+)?$/;
val = myForm.email.value;
if(!re.test(val))
{
info.innerHTML += "<span class='invalid'>email["+val+"]不合法</span><br>";
}
else
{
info.innerHTML += "<span class='valid'>eamil["+val+"]合法</span><br>";
}
return false;
}
</script>