JavaScript筆記之表單和正則表示式
正則表示式是一種對文字字串進行驗證和格式化的極其強大的方式。通過使用正則表示式，可以用一兩行JavaScript程式碼完成原本需要幾十行程式碼的複雜任務。
正則表示式是一種特殊符號編寫的模式，描述一個或多個文字字串，常常被認為是程式設計中最棘手的部分之一，但是隻要把混亂的正則表示式分解成有意義的小塊，其語法並不難理解。
下面的一個例子，是用正則表示式驗證電子郵件地址：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Email Validation</title> <link type="text/css" rel="stylesheet" href="script01.css" /> <script type="text/javascript" src="script01.js"></script> </head> <body> <h2 align="center">Email Validation</h2> <form action="someAction.cgi"> <p><label>Email Address: <input class="email" type="text" size="50" /></label></p> <p><input type="reset" /> <input type="submit" value="Submit" /></p> </form> </body> </html>
script01.css
body {
color: #000;
background-color: #FFF;
}
input.invalid {
background-color: #FF9;
border: 2px red inset;
}
label.invalid {
color: #F00;
font-weight: bold;
}
script01.js
window.onload = initForms;
function initForms() {
for (var i=0; i< document.forms.length; i++) {
document.forms[i].onsubmit = function() {return validForm();}
}
}
function validForm() {
var allGood = true;
var allTags = document.getElementsByTagName("*");
for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");
for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
thisTag.className = outClass;
if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "email":
if (allGood && !validEmail(thisTag.value)) classBack = "invalid ";
default:
classBack += thisClass;
}
return classBack;
}
function validEmail(email) {
var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
現在開始解釋紅色程式碼行：
正則表示式總是以斜槓(/)開頭和結尾。
脫字元(^)表示要使用這個表示式檢查以特定的字串開頭的字串。
表示式\w表示任意單一字元，包括a~z、A~Z、0~9或下劃線。
加號+表示要尋找前面條目的一次或多次出現。
前圓括號(表示一個組。
方括號[]用來表示可以出現其中任意一個字元，這個方括號內包含字元\.-，但是點號對於正則表示式是有特殊意義的，所以需要在它前面加上反斜槓\，這表示指的實際上是點號本身，而不是它的特殊意義。在特殊字串前面使用反斜槓稱為“對字元轉義”。
問號?表示前面的條目可以不出現或出現一次。問號後再次使用\w+，表示點號或連字元後面必須有其他一些字元。
後圓括號表示這個組結束了。在此後是一個星號*，表示前面的條目可以不出現或出現多次。
@字元僅僅代表它本身，沒有任何其他意義。
接下來再次使用\w+，表示域名必須以一個或多個a~z、A~Z、0~9或下劃線開頭。在此之後同樣是([\.-]?\w+)*，這表示電子郵件地址的字尾中允許有點號或連字元。
然後，在一對圓括號中建立另一個組:\.\w{2,3}，表示希望找到一個點號，後面跟著一些字元。花括號中的數字表示前面的條目可以出現2次或3次。
最後正則表示式的末尾是一個美元符號$，表示匹配的字串必須在這裡結束。
return re.test(email);這一行獲得前一步中定義的正則表示式，並使用test()方法驗證電子郵件的有效性。
如果不用正則表示式，則要使用多出數十行的程式碼來完成相同的程式碼
function validEmail(email) {
var invalidChars = " /:,;";
if (email == "") {
return false;
}
for (var k=0; k<invalidChars.length; k++) {
var badChar = invalidChars.charAt(k);
if (email.indexOf(badChar) > -1) {
return false;
}
}
var atPos = email.indexOf("@",1);
if (atPos == -1) {
return false;
}
if (email.indexOf("@",atPos+1) != -1) {
return false;
}
var periodPos = email.indexOf(".",atPos);
if (periodPos == -1) {
return false;
}
if (periodPos+3 > email.length) {
return false;
}
return true;
}
function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}
}
由此可見使用正則表示式確實可以減少大量程式碼。
(源《JavaScript基礎教程》)