JavaScript表單驗證

簡單JS表單驗證

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
<style>
.success
{
color:green;
}
.fail
color:red;
</style>
<script>
function checkField(reg,objId)
var obj = document.getElementById(objId);
var objSpan = document.getElementById(objId+"Span");
if(reg.test(obj.value))
{
objSpan.innerHTML=obj.alt+"OK";
objSpan.className="success";
}
else
objSpan.innerHTML=obj.alt+"不符合規則";
objSpan.className="fail";
function checkUname()
{
var reg = new RegExp("^[a-zA-Z0-9][a-zA-Z0-9_]{2,7}$");
checkField(reg,"uname");
function checkRealName()
var reg = /^[\u4E00-\u9FA5]{2,8}$/ig;
checkField(reg,"realName");
function checkEmail()
var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
checkField(reg,"email");
function checkPhone()
var reg = /^1[3|4|5|8][0-9]\d{4,8}$/;
checkField(reg,"phone");
</script>
</head>
<body>
<form action="#" method="post">
<table border="1" bordercolor="blue" cellspacing="0">
<tr>
<td width="100px" >使用者名</td>
<td width="400px">
<input name="name" type="text" size="20" id="uname" alt="使用者名" onblur="checkUname();"/>
<span id="unameSpan"></span>
</td>
</tr>
<td width="100px" >真實名</td>
<td width="400px"><input name="name" type="text" id="realName" alt="真實名" size="20" onblur="checkRealName();"/>
<span id="realNameSpan"></span>
<td>密碼</td>
<td><input name="password" type="password" size="20" /></td>
<td>重複密碼</td>
<td><input name="rpassword" type="password" size="20" /></td>
<td>年齡</td>
<td><input name="age" type="text" size="20" /></td>
<td>手機号</td>
<td>
<input type="text" name="phone" size="20" onblur="checkPhone();" alt="手機号" id="phone">
<span id="phoneSpan"></span>
<td>郵箱</td>
<input type="text" name="email" size="20" onblur="checkEmail();" alt="郵箱" id="email">
<span id="emailSpan"></span>
<td width="100px">性别</td>
<input name="sex" type="radio" value="0" />男
<input name="sex" type="radio" value="1" />女
<td>愛好</td>
<input name="hobby" type="checkbox" value="1" />足球
<input name="hobby" type="checkbox" value="2" />籃球
<input name="hobby" type="checkbox" value="3" />羽毛球
<input name="hobby" type="checkbox" value="4" />乒乓球
</tr><tr>
<td>班級</td>
<select name="class">
<option>一年級一班</option>
<option>一年級二班</option>
</select>
<td>說明</td>
<textarea name="introduce" cols="54" rows="6" ></textarea>
<input type="reset" name="reset" value="重置" />
<input type="submit" name="submit" value="送出" />
</table>
</body>
</html>

頂

踩