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

数据验证是网络应用软件从客户端接受数据的重要步骤,毕竟,您需要在使用客户数据前确保其符合预期的格式。在网络应用程序中,您可以选择使用特定平台的工具,比如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 (以及其他的语言)操作文本,通用软件进行表单验证提供了一个简单而优雅的方法。

(0)

相关推荐

  • javascript 回车键触发表单提交的问题

    比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交. 要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则: 如果表单里有一个type="submit"的按钮,回车键生效. 如果表单里只有一个type="text"的input,不管按钮是什么type,回车键生效. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=bu

  • 符合标准的js表单提交的代码

    复制代码 代码如下: <script language="javascript" type="text/javascript">          document.forms["form_name"].submit(); </script>

  • JavaScript判断表单提交时哪个radio按钮被选中的方法

    本文实例讲述了JavaScript判断表单提交时哪个radio按钮被选中的方法.分享给大家供大家参考.具体分析如下: 这里的表单提交时通过JavaScript判断哪个radio按钮被选中了 <script type="text/javascript"> function findButton() { var myForm = document.forms.animalForm; var i; for(i=0;i<myForm.marsupial.length; i++

  • JS定义网页表单提交(submit)的方法

    本文实例讲述了JS定义网页表单提交(submit)的方法.分享给大家供大家参考.具体如下: 这段代码表示网页表单提交时不是提交到指定的页面,而是执行一个特定的函数 <script> function saveInfo() { localStorage.setItem("name",$("#name").val()); } </script> <form id=register onSubmit="return saveInfo

  • Javascript级联下拉菜单以及AJAX数据验证核心代码

    虽然也使用了Prototype.js来编写,但是由于对它的不了解,类的实现仍然是使用了<JavaScript高级程序设计>里的方法.使用AJAX进行数据验证时,最初使用的是XML来当数据源,然而在使用了一段时间后,发现XML效率太低,于是又使用JSON来做为数据源. 一年过去了,客户又提出了新的需求,最初是只要输入框的两个数据相符就行,现在的要求是两个下拉菜单的数据也要相符,于是,我利用此机会,将代码重构了一次. 需求: 1.根据下拉菜单产品名称.产品包装的选择,右面的图片要进行相应的变化.

  • Web表单提交之disabled问题js解决方法

    本文实例讲述了Web表单提交之disabled问题js解决方法.分享给大家供大家参考.具体分析如下: 例如,有如下表单 复制代码 代码如下: <form id="inputForm" action="shorttermrental.action" method="post">      <input name="pname" type="text" id="pname"

  • 基于JavaScript实现带数据验证和复选框的表单提交

    实现: 1.用户至少选中某项,即表示选中该行,同时该行的数据验证通过,表单提交:否则,不提交. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带数据验证和复选框的表单提交</title> <script src="../commonJqery/jquery-3.0.0.js&q

  • asp.net中JavaScript数据验证实现代码

    今天在做一个数据修改的页面,页面上有一个DropDownList控件,绑定的是实体中的重要属性,我希望用户在修改该控件值的时候,提示用户,他修改了该控件的值.所以为该下拉控件加上了如下语句. 复制代码 代码如下: DDLmaterial.Attributes.Add("onchange", "alert('注意:您修改了物品类型!')"); 似乎不错,不仅有提示效果,也不需要刷新页面.可是当我打开页面进行测试的时候就发现了问题,当我把下拉控件的值改回原值的时候,它还

  • js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装

    前段时间写了一个 js数据验证.js email验证.js url验证.js长度验证.js数字验证等 弹出对话框形式的但是,现在不太流行那种很不友好的方式,于是重写了一个,封装得更加好的,更友好的层形式共享给大家,如果大家使用有bug,请大家给我留言完善,谢谢了. js代码 复制代码 代码如下: /** * 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息. * * @author wangzi6hao * @version 2.1 * @desc

  • 表单提交时自动复制内容到剪贴板的js代码

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>交时自动复制到剪贴板</title> </head> <script language="JavaScript"> /*功能:提交时自动复制到剪贴板 */ function copyTe

  • 可实现多表单提交的javascript函数

    <script language=javascript> function submitForm(formId,action){     var form=document.getElementById(formId);     form.action=action;     form.submit(); } </script> 传个表单ID和url进去就行了~

随机推荐