Latest web development tutorials
×

JavaScript 教程

JavaScript 教程 JavaScript 簡介 JavaScript 用法 JavaScript 輸出 JavaScript 語法 JavaScript 語句 JavaScript 註釋 JavaScript 變量 JavaScript 數據類型 JavaScript 對象 JavaScript 函數 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 運算符 JavaScript 比較 JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 類型轉換 JavaScript 正則表達式 JavaScript 錯誤 JavaScript 調試 JavaScript 變量提升 JavaScript 嚴格模式 JavaScript 使用誤區 JavaScript 表單驗證 JavaScript 保留關鍵字 JavaScript JSON JavaScript void JavaScript 代碼規範

JS 函數

JavaScript 函數定義 JavaScript 函數參數 JavaScript 函數調用 JavaScript 閉包

JS HTML DOM

DOM 簡介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高級教程

JavaScript 對象 JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp 對象

JS 瀏覽器 BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 彈窗 JavaScript 計時事件 JavaScript Cookies

JS 庫

JavaScript 庫 JavaScript 測試 jQuery JavaScript 測試 Prototype

JS 實例

JavaScript 實例 JavaScript 對象實例 JavaScript 瀏覽器對象實例 JavaScript HTML DOM 實例 JavaScript 總結

JS 參考手冊

JavaScript 對象 HTML DOM 對象

JavaScript 表單驗證

JavaScript 表單驗證

JavaScript 可用來在數據被送往服務器前對HTML 表單中的這些輸入數據進行驗證。

表單數據經常需要使用JavaScript 來驗證其正確性:


  • 驗證表單數據是否為空?

  • 驗證輸入是否是一個正確的email地址?

  • 驗證日期是否輸入正確?

  • 驗證表單輸入內容是否為數字型?


必填(或必選)項目

下面的函數用來檢查用戶是否已填寫表單中的必填(或必選)項目。 假如必填或必選項為空,那麼警告框會彈出,並且函數的返回值為false,否則函數的返回值則為true(意味著數據沒有問題):

function validateForm()
{
	var x=document.forms["myForm"]["fname"].value;
	if (x==null || x=="")
	{
		alert("姓必须填写");
		return false;
	}
}

以上函數在form 表單提交時被調用:

實例

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

嘗試一下»


E-mail 驗證

下面的函數檢查輸入的數據是否符合電子郵件地址的基本語法。

意思就是說,輸入的數據必須包含@ 符號和點號(.)。 同時,@ 不可以是郵件地址的首字符,並且@ 之後需有至少一個點號:

function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
		return false;
	}
}

下面是連同HTML 表單的完整代碼:

實例

<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>

嘗試一下»