用javascript編程簡單實現表單驗證的功能。
對應的HTML元素和設計網頁如下：
<!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=gb2312" />
<title>表單驗證</title>
<script src="js4.js" type="text/javascript" ></script>
<style type="text/css">
<!--
.STYLE4 {font-size: 18px}
-->
</style>
</head>
<body>
<form action="js1.html" method="post" οnsubmit="return submit1()">
<table width="337" border="2" align="center">
<tr>
<td colspan="2" align="center"><span class="STYLE4">會員註冊</span></td>
</tr>
<tr>
<td width="91"><span class="STYLE4">用戶名：</span></td>
<td width="228" ><input id="input1" type="text" name="name" value="aaa" οnblur="checkname()"/><span id="span1" class="STYLE4">請輸入6-10位長度</span></td>
</tr>
<tr>
<td><span class="STYLE4">密碼：</span></td>
<td><input id="pwd1" type="text" name="pwd"οnblur="checkpwd1()" value=""/><span id="pwds1">密碼6-10位數字組成</span></td>
</tr>
<tr>
<td><span class="STYLE4">確認密碼：</span></td>
<td><input type="text" name="pwd2" id="pwd2" value="" οnblur="checkpwd2()"/><span id="pwds2">請輸入的密碼與上面的密碼一致</span></td>
</tr>
<tr>
<td><span class="STYLE4">年齡：</span></td>
<td><input type="text" name="age" /></td>
</tr>
<tr>
<td><span class="STYLE4">郵箱：</span></td>
<td><input id="input2"type="text" name="add" value="" οnblur="checkadd()" /><span id="spanadd"></span></td>
</tr>
<tr>
<td><span class="STYLE4">性別：</span></td>
<td><input type="radio" name="sex" value="radiobutton" />
<span class="STYLE4">男</span>
<input type="radio" name="sex" value="radiobutton" />
<span class="STYLE4">女</span></td>
</tr>
<tr>
<td height="65" colspan="2"><input name="in" type="submit" value="提交" />
<input name="Input" type="reset" value="重置"/></td>
</tr>
</table>
</form>
</body>
</html>
function $(id){//封裝document.getElementById(id)方法
return document.getElementById(id);
}
var m1=false,m2=false,m3=false,m4=false;
//驗證name框裏的值是否合法
function checkname(){
var b1=$("input1").value;
//驗證用戶名的正則表達式
var zb=/^[a-zA-Z0-9_]{6,10}$/;
if(zb.test(b1)){//使用test（）函數驗證
//var s1="恭喜你，用戶名可以使用";
$("span1").innerHTML='<font color="green">恭喜你，用戶名可以使用</font>';//可以改變span中內嵌的內容和字體的顏色
m1=true;
}
else{
//var s2="請重新輸入";
$("span1").innerHTML='<font color="red">請重新輸入</font>';
$("input1").value="";//將輸入框置空
m1=false;
}
}
function checkpwd1(){
var p1=$("pwd1").value;
var zb=/^[0-9]{6,10}$/;
if(zb.test(p1)){
$("pwds1").innerHTML='<font color="green">密碼符合</font>';
m2=true;
}else{
$("pwds1").innerHTML='<font color="red">密碼不符合，重新輸入</font>';
$("pwd1").value="";
m2=false;
}
}
function checkpwd2(){
//確認兩次輸入密碼是否一致
var p1=$("pwd1").value;
var p2=$("pwd2").value;
if(p1==p2){
$("pwds1").innerHTML='<font color="green">√</font>';
$("pwds2").innerHTML='<font color="green">√</font>';
m3=true;
}else{
$("pwds1").innerHTML='<font color="red">×</font>';
$("pwds2").innerHTML='<font color="green">×請再次輸入</font>';
m3=false;
}
}
function checkadd(){
var b1=$("input2").value;
var zb=/^[a-zA-Z0-9_]{1,10}[@][a-zA-Z0-9]{1,255}(.cn|.com|.net)$/;
if(zb.test(b1)){
//var s1="恭喜你，用戶名可以使用";
$("spanadd").innerHTML='<font color="green">恭喜你，郵箱可以使用</font>';
m4=true;
}
else{
//var s2="請重新輸入";
$("spanadd").innerHTML='<font color="red">請重新輸入</font>';
$("input2").value="";
m4=false;
}
}
function submit1(){
return m1&&m2&&m3&&m4;//表單在被提交時執行的事件，返回true可提交，可通過設置標誌量，當前面的驗證都返回true是可提交
}運行後的截圖爲：
自己在學習時的一點練習。