`
caobihole
  • 浏览: 941518 次
文章分类
社区版块
存档分类
最新评论

如何使用JavaScript和正则表达式进行数据验证

 
阅读更多

作者: Tony Patton
2006-09-20 17:12:43

数据验证是网络应用软件从客户端接受数据的重要步骤,毕竟,您需要在使用客户数据前确保其符合预期的格式。在网络应用程序中,您可以选择使用特定平台的工具,比如ASP.NET、JSP等等,或者您可以利用客户端JavaScript的优势,JavaScript中的正则表达式可以简化数据验证的工作。

正则表达式

正则表达式是一种模式匹配的工具,它允许您以文字方式来表述模式,因而正则表达式成为了一个验证文本数据的强大工具。除了模式匹配之外,正则表达式还可以用于文字替换。从我在UNIX系统上使用Perl时第一次接触到正则表达式开始,对正则表达式的支持就一直在不断延伸。

注意:如果您身边有很多其他的开发者,正则表达式可能会被称作RegEx或者RegExp。尽管正则表达式的功能强大,不过其语法有点“神秘”,需要花一些时间来掌握,下面就让我们来看看使用正则表达式的一些基础知识。

基本语法

正则表达式的语法可以应用得很复杂,甚至需要一整本书来讲解这个题目,但是我将讲解其中一部分基本知识来帮助您获取正则表达式的初步认识。

一个基本概念是锚(anchor),它允许您指定字符串的起点和终点,脱字符(^)用于指定字符串的起点而美元符号($)则表示终点。如果需要在查询字符串中含有脱字符或者美元符号,您可以使用转义序列来实现,转义字符()是优先于脱字符或者美元符号之处理的。以下的例子会在单词search在字符串中出现时进行匹配。

^search$

而且,您还可以查找一组字符,只要将它们放在方括号中就行了,比如[ and ],相匹配的字符必需属于这个字符组,一个例子是在[12345]的范围内寻找匹配的数字1到5,该正则表达式也可以写作[1-5]。

很多时候您可能需要指定可以出现多次的字符,或者可选的字符,问号(?)的意思是该字符是可选的,加号(+)的意思是该字符可以出现一次或者多次,星号(*)的意思是该字符可以不出现或者出现多次。

现在让我们来看看如何将这些简单的正则表达式应用到JavaScript上。

JavaScript支持

JavaScript在1.2版本中添加了对正则表达式的支持,浏览器的支持则开始于Internet Explorer 4和Netscape 4,所有的Firefox 版本以及大多数现代浏览器都包含了JavaScript的支持。正则表达式可以通过JavaScript的字符串和RegExp来使用。

使用字符串

每个JavaScript字符串都可以通过三种方法来支持正则表达式,这三种方法是match()、replace()和search(),而且对象的test() 方法还允许您进行测试。以下是关于match()、replace()和search()方法的信息:

  • match(): 用于正则表达式匹配,如果多个匹配出现,则返回一个含有所有匹配结果的数组,数组中的每一个条目都是一份包含了匹配数据的拷贝;如果没有匹配值,则返回空值。
  • replace(): 用于正则表达式匹配并将所有的匹配值替换为新的子字符串,本方法的第一个参数是正则表达式,第二个参数是进行替换的字符串。
  • search(): 用于在正则表达式与指定字符串之间搜索匹配值,如果出现匹配值,则返回字符串的索引值,如果没有匹配值,则返回-1。

JavaScript 还提供了RegExp对象来创建并使用正则表达式。

RegExp

RegExp对象包含了正则表达式的模式,该对象的方法和属性可以用来匹配字符串,有两种方法可以用来创建RegExp对象的实例:使用构造函数或使用正则表达式文本模式的文字方式,第二个参数是可选的,该参数可以指定该搜索是全局的(g)、忽略大小写的(i)或者全局同时忽略大小写(gi)。以下的例子是使用构造函数创建RegExp对象的方法,在这个例子中,搜索对象的大小写是被忽略的:

testRegExp = new RegExp("^search$","I")

您可以使用文字方式来创建相同的实例(在斜杠中的部分),如下所示:

testRegExp = /^search$/i

RegExp对象包含了大量的方法,但我们只介绍其中的一个方法test。该方法将对指定字符串进行正则表达式匹配,如果成功则返回true,失败则返回false,该方法可以应用在文字字符串或者字符串变量上,基本上,它允许您对一个字符串进行正则表达式匹配,以下的例子演示了如何使用这个方法:

testRegExp = /search/i;

if (testRegExp.test("this is a search string") {

document.write("The string was found.");

} else {

document.write("No match found.");

}

We can place it in a Web page to test:

<html><head>

<title>RegExp test</title>

</head><body>

<script language="javascript">

testRegExp = /search/i;

if (testRegExp.test("this is a search string")) {

alert("The string was found.");

} else {

alert("No match found.");

}

</script></body></html>

实际操作

现在是讲解更加完整的例子的时候了,在列表A中的网页包含了JavaScript方法来验证文本框中输入的值,这段JavaScript代码将搜索包含我的姓氏和我的两个名字的字符串(忽略大小写),如果找到了我的名字,则通过字符串对象的替换方法(search)将其替换为一个短名字。第二个文本框是用于接受时间值的,一个正则表达式在此对输入的时间进行合法性验证(数字是通过冒号分割的)。这个简单的例子说明了如何在您的客户端代码中加入正则表达式来进行匹配和替换:

<html><head>

<title>RegExp validation</title>

<script language="JavaScript">

function validate() {

var doc = document.test;

varvalName = new RegExp("^(Tony|Anthony) Patton", "i");

if (doc.Name.value.match(valName) == null) {

alert("Name was not found.");

} else {

doc.Name.value = doc.Name.value.replace(valName, "T. Patton");

}

varvalTime = new RegExp("^([0-1][0-9]|[2][0-3]):([0-5][0-9])$");

if (doc.time.value.match(valTime) == null) {

alert("Please enter correct time format (hh:ss)");

} }

</script></head>

<body><form name="test">

Name: <input type="text" name="Name" value=""><br>

Time: <input type="text" name="time" value=""><br>

<input type="button" name="test" value="test" onClick="validate();">

</form></body></html>

强大而复杂

正则表达式的功能确实很强大,但是使用起来也并不简单,因此,应当循序渐进地学习,当然,它确实值得您花上一些时间来学习如何正确使用。正则表达式为JavaScript (以及其他的语言)操作文本,通用软件进行表单验证提供了一个简单而优雅的方法。

分享到:
评论

相关推荐

    精通 JavaScript正则表达式

    正则表达式可以: ...可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字 •根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字

    用正则表达式验证表单

    表单验证,验证用户输入的数据是否合法 ... c、规则与用户输入内容进行匹配,正则表达式 正则表达式规则.test(要验证的内容); d、给出明确的提示信息span标签中以及边框的颜色 2、用户点击提交按钮的时候要给出提示

    正则表达式使用详解及使用实例

     正则表达式可以让用户通过使用一系列的特殊字符构建匹配模式,然后把匹配模式与数据文件、程序输入以及WEB页面的表单输入等目标对象进行比较,根据比较对象中是否包含匹配模式,执行相应的程序。  举例来说,...

    精通正则表达式基于.NET ASP PHP JSP JavaScript

    DataTypeApplication/Default.aspx 检查和转换数据 第8章(/08/) StringApplication/StringDealwith.aspx 字符串处理 StringBuilderApplication/DealWithStringBuilder.aspx 动态字符串处理 第9章...

    JavaScript验证正则表达式

    常用JavaScript验证正则表达式,验证表单数据的合法性!

    javascript 正则表达式验证集合

    收集于网上各种javascript的正则表达式验证,如邮箱,ip,字符,数据和各种组合的验证。 只能输入由26个英文字母组成的字符串:“^[A-Za-z]+$” 只能输入由26个大写英文字母组成的字符串:“^[A-Z]+$” 只能输入由...

    javascript使用正则表达式实现注册登入校验

    主要为大家详细介绍了javascript使用正则表达式实现注册登入校验,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    JavaScript正则表达式

    JavaScript正则表达式 一、认识正则表达式 1、正则表达式是描述字符模式的对象,正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。 2、String和RegExp都定义了使用正则表达式进行强大...

    JavaScript正则表达式详解

    简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具。其作用如下: 测试字符串的某个模式。例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为...

    正则表达式经典实例

    书中提供了上百种可以在实战中使用的实例,以帮助读者使用正则表达式来处理数据和文本。对于如何使用正则表达式来解决性能不佳、误报、漏报等常见的错误以及完成一些常见的任务,本书给出了涉及基于C#、Java、...

    JavaScript使用简单正则表达式的数据验证功能示例

    本文实例讲述了JavaScript使用简单正则表达式的数据验证功能。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    JAVASCRIPT常用格式验证 数据安全验证之正则表达式 大全.rar

    JAVASCRIPT常用格式验证 数据安全验证之正则表达式 大全.rar

    正则表达式经典实例.pdf

    书中提供了上百种可以在实战中使用的实例,以帮助读者使用正则表达式来处理数据和文本。对于如何使用正则表达式来解决性能不佳、误报、漏报等常见的错误以及完成一些常见的任务,本书给出了涉及基于C#、Java、...

    C# 最全的日期正则表达式,没有之一

    考虑到这个正则表达式仅仅是用作验证,所以捕获组没有意义,只会占用资源,影响匹配效率,所以可以使用非捕获组来进行优化。 ^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2...

    正则表达式

    JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法. 在JavaScript中,正则表达式是由一个RegExp对象表示的.当然,可以使用一个RegExp()构造函数来创建RegExp...

    用javascript验证表单数据正则表达式汇总.doc

    用javascript验证表单数据正则表达式汇总

    精通正则表达式(第3版) Mastering.Regular.Expressions

    它将教会读者如何使用正则表达式解决各种问题,以及如何充分使用支持正则表达式的工具和语言。许多关于正则表达式的文档都没有介绍这种工具的能力,而本书的目的正是让读者“精通”正则表达式。  许多种工具都支持...

Global site tag (gtag.js) - Google Analytics