《JavaScript技术利用正则表达式验证表单的探讨》-工学论文，计算机论文-论文范文参考-科学狗论文网

标题

JavaScript技术利用正则表达式验证表单的探讨

范文

杨花雨李银地

摘要：在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.

[2] 朱勋程，袁斌，曹磊，等. 工商15位注册号校验位校验算法探索——JavaScript实现方法[J].标准科学， 2017（9）：101-103.

[3] 李建军. JavaScript语言在表单验证方法中的应用[J]. 企业文化， 2013（11）：180.

[4] 朱敏. JavaScript在HTML中的应用探讨[J]. 科技视界， 2016（24）：227-228.

[5] 郭琳. Struts2框架中的表单数据有效性验证[J]. 信息通信， 2017（2）：117-118.

【通联编辑：谢媛媛】

随便看

科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。