既然表單是用來采集用戶輸入的數據,那么,就應該保證用戶的數據被準確地提交到預定的地點,也就是說,我們在表單提交的時候,應該對用戶的數據進行檢驗,一來可以避免用戶誤輸數據,二來可以避免用戶輸入非法的,或者說不合格的數據;檢驗合格以后,還要保證用戶的數據提交到特定的程序。
1.數據的檢驗
數據的檢驗,通常有兩種程序:客戶端檢驗和服務器端檢驗。客戶端檢驗,比較快,服務器端檢驗,相對來說比較慢,為了確保安全,通常同時采用,這樣就可以避免用戶刻意破壞。
不管采用什么方式,數據檢驗的原理都是一樣的,一旦用戶輸入的數據不符合規定,就報錯,要求用戶重新輸入,客戶端檢驗常使用Javascrip腳本,服務器端的視系統而定,本文不對數據檢驗的具體程序設計進行探討,僅僅列舉幾個例子來說明。
樣例19:必填項,以及簡單的數據類型檢驗
分析:
- 本例給表單添加了onSubmit事件,通過onSubmit="return CheckDate()"指定提交前,必須通過函數CheckDate()來檢驗,如果不合格,返回輸入數據;
- 數據檢驗的函數如下:
<script>
function CheckDate(){
//取得輸入的數據
userName = document.RedForm.userName.value;
userEmail = document.RedForm.userEmail.value;
//如果沒有輸入姓名
if (userName=="") {
alert("請輸入姓名");
document.RedForm.userName.focus();
return false;
}else{
//如果沒有輸入Email,或者Email地址錯誤(不含@)
if ((userEmail=="")||(userEmail.indexOf("@")==-1)) {
alert("請重新輸入Email地址");
document.RedForm.userEmail.focus();
return false;
}else return true;
}
}
</script>
2.表單的分支提交
有的時候,表單需要根據用戶的選擇,提交到不同的程序,怎么做呢?
通過腳本來檢測用戶的選擇分支,從而向不同的程序提交表單,看看樣例:
樣例20:分支提交
分析:這里首先用到的是form的onSubmit="TwoSubmit(this)"
然后根據選擇的分支,來分別遞交到不同的程序,TwoSubmit()函數如下:
<script>
function TwoSubmit(form){
if (form.Ref[0].checked){
form.action = "cop.asp";//這里是分之一
}else{
form.action = "ind.asp";//這里是分之二
}
form.submit();
}
</script>
3.用任何元素提交表單
是不是只有按鈕或者圖片按鈕才能提交表單呢?當然不是,實際上,任何頁面元素都可以提交表單,不過嘛,都是通過腳本來完成的,下面我們就使用鏈接來代替Submit按鈕:
樣例21:用鏈接來提交表單
分析:
通過onClick="document.form.submit()"來提交表單;用onClick="document.form.reset()"來復位表單,這樣一來,任何一個元素都可以實現提交表單了。