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;