JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。
JavaScript 表單驗證
JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。
被 JavaScript 驗證的這些典型的表單數據有：
- 用戶是否已填寫表單中的必填項目？
- 用戶輸入的郵件地址是否合法？
- 用戶是否已輸入合法的日期？
- 用戶是否在數據域 (numeric field) 中輸入了文本？
必填（或必選）項目
下面的函數用來檢查用戶是否已填寫表單中的必填（或必選）項目。假如必填或必選項為空，那么警告框會彈出，並且函數的返回值為 false，否則函數的返回值則為 true（意味着數據沒有問題）：
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
下面是連同 HTML 表單的代碼：
<html> <head> <script type="text/javascript"> function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false} } } </script> </head> <body> <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>
E-mail 驗證
下面的函數檢查輸入的數據是否符合電子郵件地址的基本語法。
意思就是說，輸入的數據必須包含 @ 符號和點號(.)。同時，@ 不可以是郵件地址的首字符，並且 @ 之后需有至少一個點號：
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
下面是連同 HTML 表單的完整代碼：
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
正則表達式
正則表達式，又稱規則表達式。(英語:Regular Expression，在代碼中常簡寫為regex、regexp或RE)，計算機科學的一個概念。正則表達式通常被用來檢索、替換那些符合某個模式(規則)的文本。
許多程序設計語言都支持利用正則表達式進行字符串操作。例如，在Perl中就內建了一個功能強大的正則表達式引擎。正則表達式這個概念最初是由Unix中的工具軟件(例如sed和grep)普及開的。正則表達式通常縮寫成"regex"，單數有regexp、regex，復數有regexps、regexes、regexen。
正則表達式的特點是:
1. 靈活性、邏輯性和功能性非常強;
2. 可以迅速地用極簡單的方式達到字符串的復雜控制。
3. 對於剛接觸的人來說，比較晦澀難懂。
由於正則表達式主要應用對象是文本，因此它在各種文本編輯器場合都有應用，小到著名編輯器EditPlus，大到Microsoft Word、Visual Studio等大型編輯器，都可以使用正則表達式來處理文本內容。
速記理解技巧
四個字符是所有語言都支持的正則表達式，所以這四個是基礎的正則表達式。正則難理解因為里面有一個等價的概念，這個概念大大增加了理解難度，讓很多初學者看起來會懵，如果把等價都恢復成原始寫法，自己書寫正則就超級簡單了，就像說話一樣去寫你的正則了:
等價:
等價是等同於的意思，表示同樣的功能，用不同符號來書寫。
?,*,+,\d,\w 都是等價字符
?等價於匹配長度{0,1}
*等價於匹配長度{0,}
+等價於匹配長度{1,}
\d等價於[0-9]
\D等價於[^0-9]
\w等價於[A-Za-z_0-9]
\W等價於[^A-Za-z_0-9]。
常用運算符與表達式:
^ 開始
() 域段
[] 包含,默認是一個字符長度
[^] 不包含,默認是一個字符長度
{n,m} 匹配長度
. 任何單個字符(\. 字符點)
| 或
\ 轉義
$ 結尾
[A-Z] 26個大寫字母
[a-z] 26個小寫字母
[0-9] 0至9數字
[A-Za-z0-9] 26個大寫字母、26個小寫字母和0至9數字
， 分割
.
分割語法:
[A,H,T,W] 包含A或H或T或W字母
[a,h,t,w] 包含a或h或t或w字母
[0,3,6,8] 包含0或3或6或8數字
語法與釋義:
基礎語法 "^([]{})([]{})([]{})$"
正則字符串 = "開始([包含內容]{長度})([包含內容]{長度})([包含內容]{長度})結束"
?,*,+,\d,\w 這些都是簡寫的,完全可以用[]和{}代替，在(?:)(?=)(?!)(?<=)(?<!)(?i)(*?)(+?)這種特殊組合情況下除外。
初學者可以忽略?,*,+,\d,\w一些簡寫標示符，學會了基礎使用再按表自己去等價替換
實例:
字符串;tel:086-0666-88810009999
原始正則:"^tel:[0-9]{1,3}-[0][0-9]{2,3}-[0-9]{8,11}$"
速記理解:開始 "tel:普通文本"[0-9數字]{1至3位}"-普通文本"[0數字][0-9數字]{2至3位}"-普通文本"[0-9數字]{8至11位} 結束"
等價簡寫后正則寫法:"^tel:\d{1,3}-[0]\d{2,3}-\d{8,11}$" ，簡寫語法不是所有語言都支持。