6編寫程序(以表單為例)
舉一個實用例子為例,建立一登錄表單,接著用 JavaScript 進行驗證,依照以下步驟:
1. 製作 HTML
編寫正確 HTML 表單,也可加上 CSS 美化:
上述表單將提交給 login.php,此腳本進行如下工作:
- 驗證提交的電子郵件地址
- 驗證提交的密碼
- 確認提交的值與以前儲存在資料庫的內容相符
- 如果匹配,則發送 cookie 或者啟動一個追蹤客戶端的會話
- 重新導向使用者至歡迎頁面
2. 加入 JavaScript 層級
先加入一個外部的 JavaScript 擋案 login.js,把它放在 HTML 頁面中
<body>
結束標記之前:
<script src="js/login.js">
需注意 HTML 繫結 JavaScript 之間的元素,對於 JavaScript 屬性是 id,對於 PHP 伺服端則用 name,通常來說這兩個值都每個元素來說都相同,頁面上的每個元素都必須有唯一的 id 值:
//取得表單元素
var loginForm = document.getElementById('loginForm');
3. 處理事件
JavaScript 是一種事件驅動語言,這意味著它僅在事件發生之後進行某些工作,包含:
- 載入網頁
- 按下某個元素,如按鈕或超連結
- 在表單元素中輸入文字
- 將游標移動到一個元素上(mouseover)
- 將游標移從一個元素上移開(mouseout)
為了讓 JavaScript 驗證 HTML 表單,必須確定觸發驗證程式碼的事件。常用於表單驗證的事件如下:
- 提交表單
- 按一下提交按鈕(同時觸發表單提交事件)
- 改變表單元素的值
- 表單元素失去焦點時(不管值是否改變都觸發)
為表單加上一個事件監聽器(Event listener),事件監聽器是一種在「這個事件」發生在「這個物件」時呼叫的函數,每個物件,無論是整個瀏覽器視窗或頁面中的具體元素(不管是否為表單元素),都有能夠觸發的特定事件,被呼叫的函數通常是自行定義,物件、事件類型和函數的組合造成了各式各樣的可能性。當觸發某些工作時進行動作:
//加入表單送出時的 onsubmit 監聽事件
loginForm.onsubmit = validateForm;
validateForm 函數指派給 loginForm 物件的 onsubmit 屬性
- 引用基於事件的物件屬性時,全部使用小寫字母
- 注意函數名稱用在設定陳述式的右側,沒有引號,結尾也沒有小括號
從伺服器請求文件時,使用者將按照順序取得 HTML 文件資料:瀏覽器先接收 DOCTYPE,接著是
<html>
標記、
<head>
標記和其內容,然後是檔案主體及其內容,包括相對應素材(CSS 檔、圖片和多媒體、JavaScript 和 Flash),直到文件結束。在瀏覽器完全瞭解 HTML 頁面之前無法呈現 DOM,所以要先確認瀏覽器完全載入整份頁面,才可安全使用 DOM。因為這是一個事件,可設定事件監聽器,進行 init(initialize)函數:
//加入網頁載入時的 onload 監聽事件
window.onload = init;
將表單觸發事件放入 init() 裡,函數實際的程式碼出現在大括號之間,代表呼叫函數後即將執行的任務。為了表示進行 DOM 時是安全的,加上「只在瀏覽器支援
document.getElementById()
」的保護措施:
function init(){
//確認瀏覽器支援 document.getElementById() 才進行驗證
if(document && document.getElementById){
var loginForm = document.getElementById('loginForm');
loginForm.onsubmit = validateForm;
}
}
現在有兩個事件監聽器:第一個是監聽 window 的 load 事件,此事件於每個頁面只發生一次,觸發時呼叫 init() 函數;第二個監聽器等待表單的提交,可能發生任意次(或一次也沒有)。每當發生此事件時,都呼叫 validateform() 函數。
4. 執行驗證
validateForm() 驗證表單後返回布林值,true 就允許表單提交給伺服器腳本;false 阻止表單提交,函數內包含針對各欄位的驗證:
function validateForm(){
var email = document.getElementById('email'); //取得 email 元素
var password = document.getElementById('password'); //取得 password 元素
//簡單檢查長度是否大於 0(證明輸入了任意內容)
if((email.value.length > 0) && (password.value.length > 0)){
return false;
}else{
alert('請完整填寫表單');
return true;
}
}
現在有一個簡單、漸進式改善、非侵入式的 JavaScript,在發送 HTML 表單到伺服器之前進行驗證。該腳本有三個上層(非巢狀式)的元件:
- validateForm() 函數的定義
- init() 函數的定義
- 將 init() 函數註冊為 window.onload 事件監聽器
現在整合成一個完整的腳本,並加入嚴格模式:
function validateForm(){
'use strict';
var email = document.getElementById('email');
var password = document.getElementById('password');
if((email.value.length > 0) && (password.value.length > 0)){
return false;
}else{
alert('請完整填寫表單');
return true;
}
}
function init(){
'use strict';
if(document && document.getElementById){
var loginForm = document.getElementById('loginForm');
loginForm.onsubmit = validateForm;
}
}
window.onload = init;