JavaScript技術利用正則表達式驗證表單的探討

2019-11-03 13:11:42楊花雨李銀地

電腦知識與技術 2019年24期

楊花雨李銀地

摘要：在WEB前端開發設計中表單常用于收集用戶輸入的信息，用戶輸入的信息在被傳輸到服務器時需要對其進行驗證，表單信息通常需要使用 JavaScript技術來驗證。該文使用JavaScript技術，利用正則表達式，完成文本字符串的檢測、替換等功能。給出了在實現用戶注冊頁面中表單驗證的過程中，設置每個表單元素的JavaScript技術驗證方法，并分析了每個正則表達式的具體定義及應用方法。

關鍵詞：WEB前端;表單驗證;JavaScript;正則表達式

中圖分類號：TP311? ? ? ?文獻標識碼：A

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

開放科學（資源服務）標識碼（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前端中的重要組成部分，表單可以收集用戶輸入的信息并將收集的數據發送到服務器，完成由客戶端向服務器端傳遞數據。瀏覽網頁時，我們經常看到用戶登錄、用戶注冊以及其他頁面。用戶注冊頁面，通常需要輸入用戶名、密碼、電子郵件、手機號碼、身份證號碼、生日、郵箱地址等基本信息。信息需要按照規定的長度及格式進行輸入，如果不滿足要求立即會給出相應的提示信息或是表單元素內容將被清空，并要求重新輸入。HTML+CSS+JavaScript被稱為Web前端開發。HTML語言包含網頁的基本元素和定義了網頁的基本結構，可以達到網頁的基本格式要求。CSS樣式表彌補了HTML在頁面美化上的不足，對頁面布局、頁面元素的控制較為強大，可以滿足網頁一些特殊格式的要求。JavaScript是實時、動態、交互式的腳本語言，響應客戶操作。本文以表單驗證為例，探討JavaScript技術利用正則表達式在WEB前端開發中的應用。

2 JavaScript簡介

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

2.1 JavaScript在客戶端的應用

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

2.2 HTML頁面中嵌入JavaScript的方法

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

1）頁面中定義JavaScript代碼

在或者標簽對之間，設置

2）鏈接外部JavaScript文件

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

3）事件調用JavaScript程序

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

an onload script

function done（）{

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

頁面原始內容不包含任何腳本語句。

3 正則表達式的用法

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

3.1 正則表達式的定義

在JavaScript技術中，正則表達式的定義可以使用兩種方式：

1）采用RegExp對象的顯式構造函數構造

var reg=new RegExp（“參數”，[“flags”]）

2）采用RegExp對象的隱式構造函數構造

var reg=/參數/[flags]

flags是標志信息項，i忽略大小寫字母的標志，g表示在整個文本中找到出現的所有參數，m表示多行標志。

3.2 正則表達式常用方法

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

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

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

match（）方法：用來執行全局查找，并把查找結果放在一個數組里。

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

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

4 JavaScript技術驗證表單

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

4.1 定義正則表達式及驗證函數

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

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

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

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

4.2 驗證表單信息

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

function checkall（）

{ checkuser（）;

checkpw（）;

checkrpw（）;

checkph（）;

checkqq（）;

checkemail（）;}

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

5 結束語

HTML 定義了網頁的基本結構，CSS用于布局和美化網頁，JavaScript是網頁的行為，JavaScript是WEB前端開發中網頁進行交互動態效果的重要技術。從本文用戶注冊頁面的表單驗證案例來看，JavaScript技術利用正則表達式可以快速、有效地完成表單驗證。

參考文獻：

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