楊花雨 李銀地

摘要：在WEB前端開發(fā)設(shè)計中表單常用于收集用戶輸入的信息，用戶輸入的信息在被傳輸?shù)椒?wù)器時需要對其進(jìn)行驗證，表單信息通常需要使用 JavaScript技術(shù)來驗證。該文使用JavaScript技術(shù)，利用正則表達(dá)式，完成文本字符串的檢測、替換等功能。給出了在實現(xiàn)用戶注冊頁面中表單驗證的過程中，設(shè)置每個表單元素的JavaScript技術(shù)驗證方法，并分析了每個正則表達(dá)式的具體定義及應(yīng)用方法。

關(guān)鍵詞：WEB前端;表單驗證;JavaScript;正則表達(dá)式

中圖分類號：TP311? ? ? ?文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2019）24-0022-03

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

JavaScript Technology Uses Regular Expressions to Verify Forms

YANG Hua-yu， LI Yin-di

（Shangqiu Institute of Technology， shangqiu 476000， China）

Abstract： Forms are often used to collect user input information in WEB front-end development and design. User input information needs to be validated when it is transmitted to the server. Form information usually needs to be validated by JavaScript technology. This paper uses JavaScript technology and regular expression to complete the functions of text string detection and replacement. In the process of form validation in user registration page， the JavaScript technology validation method of setting each form element is given， and the concrete definition and application method of each regular expression are analyzed.

Key words： WEB front-end; form validation; JavaScript; regular expressions

1 背景

表單是WEB前端中的重要組成部分，表單可以收集用戶輸入的信息并將收集的數(shù)據(jù)發(fā)送到服務(wù)器，完成由客戶端向服務(wù)器端傳遞數(shù)據(jù)。瀏覽網(wǎng)頁時，我們經(jīng)常看到用戶登錄、用戶注冊以及其他頁面。用戶注冊頁面，通常需要輸入用戶名、密碼、電子郵件、手機(jī)號碼、身份證號碼、生日、郵箱地址等基本信息。信息需要按照規(guī)定的長度及格式進(jìn)行輸入，如果不滿足要求立即會給出相應(yīng)的提示信息或是表單元素內(nèi)容將被清空，并要求重新輸入。HTML+CSS+JavaScript被稱為Web前端開發(fā)。HTML語言包含網(wǎng)頁的基本元素和定義了網(wǎng)頁的基本結(jié)構(gòu)，可以達(dá)到網(wǎng)頁的基本格式要求。CSS樣式表彌補(bǔ)了HTML在頁面美化上的不足，對頁面布局、頁面元素的控制較為強(qiáng)大，可以滿足網(wǎng)頁一些特殊格式的要求。JavaScript是實時、動態(tài)、交互式的腳本語言，響應(yīng)客戶操作。本文以表單驗證為例，探討JavaScript技術(shù)利用正則表達(dá)式在WEB前端開發(fā)中的應(yīng)用。

2 JavaScript簡介

JavaScript語言的最初名稱為Live Script，由Netscape公司開發(fā)，在Sun公司推出了Java語言之后，Netscape公司與Sun公司合作，于1995年12月推出了一種新的語言，稱為JavaScript 1.0，然后，微軟的瀏覽器InternetExplorer3.0開始支持JavaScript?，F(xiàn)在，流行的瀏覽器都支持JavaScript腳本語言。JavaScript腳本語言具有簡單、動態(tài)、基于對象的語言、安全、跨平臺等特點。

2.1 JavaScript在客戶端的應(yīng)用

客戶端的JavaScript腳本嵌入在HTML頁面中，或者外部連接到HTML頁面。JavaScript腳本語言由瀏覽器解釋執(zhí)行，與操作系統(tǒng)及服務(wù)器沒有關(guān)系，當(dāng)用戶運(yùn)行瀏覽器請求HTML頁面時，JavaScript腳本將與HTML頁面一起下載到客戶端，由客戶端的瀏覽器讀取HTML頁面，并解析其中是否含有JavaScript腳本。

2.2 HTML頁面中嵌入JavaScript的方法

JavaScript腳本代碼包含在標(biāo)簽中，位置不固定，可出現(xiàn)在或者標(biāo)簽對之間。也可以嵌入多段JavaScript代碼。

1）頁面中定義JavaScript代碼

在或者標(biāo)簽對之間，設(shè)置

2）鏈接外部JavaScript文件

首先創(chuàng)建外部JavaScript文件，例如創(chuàng)建first.js文件。然后創(chuàng)建HTML文件，在HTML文件中使用

3）事件調(diào)用JavaScript程序

事件調(diào)用JavaScript程序，是JavaScript技術(shù)引入到HTML頁面中常用到的方式，將事件處理程序放在自定義函數(shù)中，使用事件調(diào)用該函數(shù)。使用事件處理程序處理頁面時，最重要的是通過事件指定事件處理程序。

function done（）{

alert（"the page has finished loading."）}

頁面原始內(nèi)容不包含任何腳本語句。

3 正則表達(dá)式的用法

在JavaScript技術(shù)中，文本字符串可以使用正則表達(dá)式輕松檢測和替換。正則表達(dá)式其實是定義的字符串，它用于字符串進(jìn)行搜索匹配的一種模式。JavaScript腳本語言中引入正則表達(dá)式主要作用：驗證字符串的格式、查找字符串、替換文本。本文主要利用正則表達(dá)式進(jìn)行驗證字符串格式。

3.1 正則表達(dá)式的定義

在JavaScript技術(shù)中，正則表達(dá)式的定義可以使用兩種方式：

1）采用RegExp對象的顯式構(gòu)造函數(shù)構(gòu)造

var reg=new RegExp（“參數(shù)”，[“flags”]）

2）采用RegExp對象的隱式構(gòu)造函數(shù)構(gòu)造

var reg=/參數(shù)/[flags]

flags是標(biāo)志信息項，i忽略大小寫字母的標(biāo)志，g表示在整個文本中找到出現(xiàn)的所有參數(shù)，m表示多行標(biāo)志。

3.2 正則表達(dá)式常用方法

正則表達(dá)式屬于RegExp對象，只要是對象就有屬性和方法，正則表達(dá)式常用的方法主要有以下幾種：

test（ ）方法：對字符串執(zhí)行可測試性搜索，匹配成功返回true，否則返回false。

search（ ）方法：用于搜索匹配正則表達(dá)式的字符串中子字符串的位置。

match（ ）方法：用來執(zhí)行全局查找，并把查找結(jié)果放在一個數(shù)組里。

replace（ ）方法：通過正則表達(dá)式查找和替換字符串中的相應(yīng)內(nèi)容，不更改原始字符串，只是重新生成了一個新的字符串。

本文將以用戶注冊頁面為例，主要使用test（ ）方法來驗證用戶輸入的表單字符串。

4 JavaScript技術(shù)驗證表單

JavaScript利用正則表達(dá)式完成用戶注冊頁面的表單驗證，主要完成如圖1所示驗證。

4.1 定義正則表達(dá)式及驗證函數(shù)

用戶名要求4-16位字符，不能以數(shù)字開頭，定義用戶名的正則表達(dá)式：reguser=/[^0-9]＼w{3，15}$/，用戶輸入的信息與定義的用戶名正則表達(dá)式使用test（）方法進(jìn)行字符串匹配，如果成功則在用戶名文本框后方出現(xiàn)對號圖標(biāo);如果匹配不成功則說明用戶名信息沒有規(guī)定格式輸入，在文本框后方面出現(xiàn)叉號圖標(biāo);如果用戶名信息為空，則顯示警示圖標(biāo)，并給出提示信息“請輸入用戶名稱！”。事件調(diào)用的方式把JavaScript腳本代碼引入到HTML頁面中，在

以同樣方式定義其它正則表達(dá)式及驗證函數(shù)，密碼長度需要6-15位，由字母、數(shù)字、下劃線組成。它們不以數(shù)字開頭，并定義其正則表達(dá)式：regpw=/^[a-zA-Z_]＼w{5，14}$/，定義驗證函數(shù)checkpw（）。確定密碼要求與密碼相同，只需要定義驗證函數(shù)checkrpw（），判斷輸入的確定密碼信息與密碼是否一致即可。手機(jī)電話號碼需要11位數(shù)字，第一位是1，第二位是3、4、5、7或8，定義其正則表達(dá)式：regph=/^1[3，4，5，7，8]＼d{9}$/，定義驗證函數(shù)checkph（）。QQ號碼要求5-10位數(shù)字，且首位不能為0，定義其正則表達(dá)式：regqq=/^[1-9]＼d{4，9}$/，定義驗證函數(shù)checkqq（）。有效郵箱的正則表達(dá)式：

regem=/^[a-zA-Z_]＼w{6，17}@＼w+＼.（[a-zA-Z]{2，3}）

{1，2}$/，定義驗證函數(shù)checkemail（）。

4.2 驗證表單信息

提交表單時驗證表單信息是否正確，可以使用表單的onsubmit事件或按鈕的onclick事件，此處使用按鈕的事件onclick。單擊“提交”按鈕時同時驗證所有信息，如果不正確在各自文本框后方顯示錯誤提示叉號圖標(biāo)，如果正確顯示對號圖標(biāo)，為空則顯示警示圖標(biāo)。按鈕的onclick事件同時調(diào)用多個函數(shù)，定義一個函數(shù)checkall（），此函數(shù)中分別調(diào)用用戶名、密碼、確認(rèn)密碼、手機(jī)號碼、QQ號碼、郵箱地址等驗證函數(shù)。具體代碼如下所示：

function checkall（）

{ checkuser（）;

checkpw（）;

checkrpw（）;

checkph（）;

checkqq（）;

checkemail（）;}

輸入用戶名信息為flowers，密碼為y456123，確認(rèn)密碼為123456，手機(jī)號碼信息為空，QQ號碼輸入01456，郵箱信息為空，單擊“提交”按鈕驗證信息效果如圖2所示。

5 結(jié)束語

HTML 定義了網(wǎng)頁的基本結(jié)構(gòu)，CSS用于布局和美化網(wǎng)頁，JavaScript是網(wǎng)頁的行為，JavaScript是WEB前端開發(fā)中網(wǎng)頁進(jìn)行交互動態(tài)效果的重要技術(shù)。從本文用戶注冊頁面的表單驗證案例來看，JavaScript技術(shù)利用正則表達(dá)式可以快速、有效地完成表單驗證。

參考文獻(xiàn)：

[1] 李雨亭， 呂婕， 王澤璘. JavaScript+jQuery程序開發(fā)實用教程[M]. 北京： 清華大學(xué)出版社， 2016.

[2] 朱勛程， 袁斌， 曹磊， 等. 工商15位注冊號校驗位校驗算法探索——JavaScript實現(xiàn)方法[J].標(biāo)準(zhǔn)科學(xué)， 2017（9）：101-103.

[3] 李建軍. JavaScript語言在表單驗證方法中的應(yīng)用[J]. 企業(yè)文化， 2013（11）：180.

[4] 朱敏. JavaScript在HTML中的應(yīng)用探討[J]. 科技視界， 2016（24）：227-228.

[5] 郭琳. Struts2框架中的表單數(shù)據(jù)有效性驗證[J]. 信息通信， 2017（2）：117-118.

【通聯(lián)編輯：謝媛媛】