網(wǎng)頁(yè)表單的制作和驗(yàn)證過(guò)程
在Webapp編程中程序員經(jīng)常要和前臺(tái)頁(yè)面打交道，CSS，HTML和JS等都是經(jīng)常需要操作的內(nèi)容，對(duì)于直接用戶來(lái)說(shuō)，這些就是他們印象中的整個(gè)程序，如果前臺(tái)頁(yè)面不美觀或是使用不便將影響用戶對(duì)程序的印象，因此程序員應(yīng)該在前臺(tái)上投入一些精力學(xué)習(xí)是值得的，在Web2.0時(shí)代來(lái)臨之后更是如此。
下面就是一個(gè)通用網(wǎng)頁(yè)表單的制作和驗(yàn)證過(guò)程
表單效果
放置表單項(xiàng)的表格
將表單項(xiàng)放在表格中是常用的做法，這次也不例外。這里為了美觀制作了兩個(gè)嵌套表格，外表格兩行一列，分別放置表單說(shuō)明文字和內(nèi)表格；內(nèi)表格放置表單元素等。這里還讓內(nèi)表格比外表格略窄，并在外表格中居中，以在左右留出一些空擋。另外對(duì)外表格的邊框和顏色進(jìn)行設(shè)置使效果更加美觀。
內(nèi)外表格頁(yè)面代碼如下：
內(nèi)外表格頁(yè)面代碼
<html:form action="/CreateTopic.do" onsubmit="return check();">
<!-- 外層表格，比內(nèi)表格寬，以在左右留出一定空當(dāng) -->
<table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="630" align="center" border="0">
<tr bgcolor="#eaecf5" height="25">
<td colspan=3> <font face=webdings color=#ff8c00>8</font><b> 創(chuàng)建新主題</b>< /td>
</tr>
<tr bgcolor=#236d78 height=1><td></td></tr>
<tr bgcolor=#eaecf5 >
<td bgcolor=#ffffff>
<!-- 內(nèi)置表格，居中,比外表格窄， -->
<table width=560 align=center border=0>
<tbody>
<tr>
<td colspan="2"><html:hidden property="pid" value="<%=pid%>"/></td>
</tr>
<tr>
<td width=70>主題名:</td>
<td><html:text property="name" size="20" maxlength="20"/><font color=red> (必填)</font><span id="nameMsg" class="feedbackHide">主題必須輸入</span></td>
</tr>
<tr>
<td width=70>主題分類:</td>
<td><input type="text" name="topicclass"/><span id="topicclassMsg" class="feedbackHide">如果填寫(xiě)的話分類必須是漢字</span></td>
</tr>
<tr valign="top">
<td>主題內(nèi)容:</td>
<td valign="top"><html:textarea property="concept" rows="10" cols="30"/><font color=red> (必填)</font><span id="conceptMsg" class="feedbackHide">內(nèi)容必須輸入</span></td>
</tr>
<tr>
<td></td>
<td><html:submit property="submit" value="發(fā)表" /></td>
</tr>
</tbody>
</table>
<!-- 內(nèi)置表格結(jié)束-->
</td>
</tr>
</table>
<!-- 外層表格結(jié)束 -->
</html:form>
表單元素驗(yàn)證出錯(cuò)時(shí)的顯示文字
表單元素是需要進(jìn)行驗(yàn)證的，當(dāng)驗(yàn)證出錯(cuò)時(shí)需要顯示出錯(cuò)信息提示用戶，上面代碼中的<span id=“topicclassMsg” class=“feedbackHide”>如果填寫(xiě)的話分類必須是漢字</span>就是出錯(cuò)提示文字，正確時(shí)這段文字不可見(jiàn)，出錯(cuò)時(shí)將span的類名改為feedbackShow即可。
將提示文字寫(xiě)在頁(yè)面而不是JS中有利于把內(nèi)容和行為分離，當(dāng)然具體怎么選擇要看你的個(gè)人喜好。
CSS定義：
.feedbackShow{
visibility: visible;
}
.feedbackHide{
visibility: hidden;
}
驗(yàn)證函數(shù)
<script LANGUAGE="JavaScript">
<!—
/**
* text has text Check
*/
function hasText(str){
return str.length>0;
}
function $(id){
return document.getElementById(id);
}
/**
* Character Check
*/
function isCharacter(str){
var regex=new RegExp("^[\u4E00-\u9FA5]+$");
return regex.test(str);
}
/**
* 新建主題前檢查
*/
function check(){
// 取得主題名（必填字段）
var name=$("name").value;
// 主題名非空檢查
if(hasText(name)==false){
$("name").focus();
$("nameMsg").className="feedbackShow";
return false;
}
else{
$("nameMsg").className="feedbackHide";
}
// 取得主題分類（非必填字段）
var topicclass=$("topicclass").value;
// 主題分類非空檢查
if(hasText(topicclass)==true){
if(isCharacter(topicclass)==false){
$("topicclass").focus();
$("topicclassMsg").className="feedbackShow";
return false;
}
else{
$("topicclassMsg").className="feedbackHide";
}
}
// 取得主題內(nèi)容（必填字段）
var concept=$("concept").value;
// 主題內(nèi)容非空檢查
if(hasText(concept)==false){
$("concept").focus();
$("conceptMsg").className="feedbackShow";
return false;
}
else{
$("conceptMsg").className="feedbackHide";
}
return true;
}
//-->
</script>
驗(yàn)證效果一
驗(yàn)證效果二
