JavaScript中的表单验证与正则表达式

本文介绍了正则表达式的基础知识,包括概念、语法及其在文本处理中的应用。详细讲解了元字符、限定符、特殊字符集等核心内容,并通过实例演示了如何创建和使用正则表达式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


一、什么是正则表达式

1、 概念

正则表达式是一种可以用于模式匹配和替换的强有力的工具。其作用如下:

(1)测试字符串的某个模式。例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个比如电话号码模式或者一个信用卡号码等模式。这称为数据有效性验证。

(2)替换文本。可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字。

(3)根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字。

2、 语法

在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表达式的语法格式。

法语:

/pattern/

其中位于“/”定界符之间的部分就是将要在目标对象中进行匹配的模式。用户只要把希望查找匹配对象的模式内容放入“/”定界符之间即可。为了能够使用户更加灵活的定制模式内容,正则表达式提供了专门的元字符。所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符,可以用来规定其前导字符(即位于元字符前面的字符)在目标对象中的出现模式。

二、创建正则表达式

1、 exec()方法介绍

语法:

reg.exec(str);

其中str为要执行正则表达式的目标字符串

例如:

var reg=/test/;

varstr="testString";

alert(reg.exec(str));

将会输出test,因为正则表达式reg会匹配str(“testString”)中的”test”子字符串,并且将其返回。

据此我们可以定义一个自定义函数:

function execReg(reg,txt) {

    var result=reg.exec(txt);

    return result

}

2、 test()方法介绍

test方法用来检查是否能够匹配str,并且返回布尔值以表示是否成功。

同样我们可以定义一个自定义函数:

function testReg(reg,txt) {

    var result=reg.test(txt);

    return result;

}

3、 正则表达式中的元字符及限定符

c{n}

{1}表示一个的意思。

c{1}:只能匹配一个c。

c{2}:则会匹配两个连续的c。

以此类推。

c{n}则会匹配n个连续的c。

        var reg=/c{1}/;

        varstr="computer";

        reg.exec(str);

返回c

        var reg=/c{2}/;

        varstr="computer";

        reg.exec(str);

返回null,表示没有匹配的

        var reg=/c{2}/;

        varstr="cctv中央电视台";

        reg.exec(str);

返回cc

c{n,m}
表示连续的n或m个c,要求n <= m

例如:

        var reg=/c{3,4}/;

        varstr="cctv中央电视台";

        reg.exec(str);

返回null,表示没有匹配成功

        var reg=/c{3,4}/;

        varstr="cccString";

        reg.exec(str);

返回ccc

        var reg=/c{3,4}/;

        varstr="ccccString ";

        reg.exec(str);

结果返回cccc,这表明正则会尽量多匹配,可3可4的时候它会选择多匹配一个。

        var reg=/c{3,4}/;

        varstr="cccccString ";

        reg.exec(str);

仍然只匹配4个。

  c{n,}

表示匹配连续n或n个以上的c

        var reg=/c{1,}/;

        varstr="comuter";

        reg.exec(str);

返回c

        var reg=/c{1, }/;

        varstr="cccccString ";

        reg.exec(str);

返回ccccc,这再次说明正则会尽可能多的匹配

        var reg=/c{2,}/;

        varstr="comuter";

        reg.exec(str);

结果返回null,c{2,}表示2个或2个以上的c,而computer中只有1个c。

由以上例子可知,c{n,}表示最少n个c,最多则不限个数。

 *,+,?

*表示0次或者多次,等同于{0,},即c* 和 c{0,} 是一个意思。

+表示一次或者多次,等同于{1,},即c+ 和 c{1,} 是一个意思。

?表示0次或者1次,等同于{0,1},即c? 和 c{0,1} 是一个意思。

 贪心与非贪心

人都是贪婪的,正则也是如此。我们在例子reg = /c{3,4}/;str='ccccTest';的例子中已经看到了,能匹配四个的时候,正则绝对不会去匹配三个。上面所介绍的所有的正则都是这样,只要在合法的情况下,它们会尽量多去匹配字符,这就叫做贪心模式。

如果我们希望正则尽量少地匹配字符,那么就可以在表示数字的符号后面加上一个?,组成如下的形式:

{n,}?, *?, +?, ??, {m,n}?

        var reg=/c{1,}?/;

        varstr="cccccString ";

        reg.exec(str);

返回的结果只有1个c,尽管有5个c可以匹配,但是由于正则表达式是非贪心模式,所以只会匹配一个。

 /^开头,结尾$/

^表示只匹配字符串的开头。看下面的例子:

        var reg=/^c/;

        varstr="computer";

        reg.exec(str);

返回c,因为execute正好是以c开头

与^相反,$则只匹配字符串结尾的字符,看下面的例子:

        var reg=/c$/;

        varstr="computer";

        reg.exec(str);

返回null,表示正则表达式没能在字符串的结尾找到c这个字符。

        var reg=/c$/;

        varstr="维生素c";

        reg.exec(str);

这次返回的结果是c

.

“.”会匹配字符串中除了换行符\n之外的所有字符,例如:

        var reg=/./;

        varstr="computer";

        reg.exec(str);

结果显示,正则匹配到了字符c

        var reg=/./;

        varstr="parent";

        reg.exec(str);

这次匹配到的是p

        var reg=/.+/;

        varstr="family-father and mather i love you!哈哈!";

        reg.exec(str);

结果是“family-father and mather i love you!哈哈!”,也就是说所有的字符都被匹配了。

二选一,正则表达式中的或――”|”

b|c表示匹配b或者c

        var reg=/b|c/;

        varstr="computer";

        reg.exec(str);

结果是c

        var reg=/b|c/;

        varstr="bluebird";

        reg.exec(str);

结果是b

        var reg=/^b|c.+/;

        varstr="computer";

        reg.exec(str);

匹配整个单词computer

        var reg=/^b|c.+/;

        varstr="bluebird";

        reg.exec(str);

返回一个b,而不是整个单词。因为上面正则表达式的意思是,匹配开头的b或者是c.+。

括号()

        reg=/^(b|c).+/;

        str='bbs.blueidea.com';

        reg.exec(str);

匹配的是整个bbs.blueidea.com。这个正则的意思是,如果字符串的开头是b或者c,那么匹配开头的b或者c以及其后的所有的非换行字符。

同学们做实验会发现,返回的结果后面多出来一个”,b”,这是()内的b|c所匹配的内容。我们在正则表达式内括号里写的内容会被认为是子正则表达式,所匹配的结果也会被记录下来供后面使用。

 字符集合[abc]

[abc]表示a或者b或者c中的任意一个字符。例如:

        reg=/^[abc]/;

        str='bbs.blueidea.com';

        reg.exec(str);

返回的结果是b

        reg=/^[abc]/;

        str='family';

        reg.exec(str);

这次返回的结果就是null了

我们在字符集合中使用如下的表示方式:[a-z]、[A-Z]、[0-9],分别表示小写字母、大写字母、数字。例如:

        reg=/^[a-zA-Z][a-zA-Z0-9_]+/;

        str='family';

        reg.exec(str);

结果是整个family,正则的意思是开头必须是英文字母,后面可以是英文字母或者数字或者下划线。

反字符集合[^abc]

^在正则表达式开始部分的时候表示开头的意思,例如/^c/表示开头是c;但是在字符集中,它表示的是类似“非”的意思,例如[^abc]就表示不能是a、b或者c中的任何一个。例如:

        reg=/[^abc]/;

        str='bluebird';

        reg.exec(str);

返回的结果是l,因为它是第一个非abc的字符(即第一个b没有匹配)

        reg=/[^abc]/;

        str='cainiao';

        reg.exec(str);

结果返回i,因为前两个字符都是[abc]集合中的。

由此我们可知:[^0-9]表示非数字,[^a-z]表示非小写字母,以此类推。

边界与非边界

\b表示边界的意思,也就是说,只有字符串的开头和结尾才算数。例如/\bc/就表示字符串开始的c或者是结尾的c。看下面的例子:

        reg=/\bc/;

        str='computer';

        reg.exec(str);

返回结果c。匹配到了左边界的c字符

        reg=/\bc/;

        str='维生素c';

        reg.exec(str);

仍然返回c,不过这次返回的是右侧边界的c

        reg=/\bc/;

        str='nice';

        reg.exec(str);

这次匹配失败,因为nice字符串中的c被夹在中间,既不在左边界也不再右边界。

与\b对应的是\B,表示非边界。例如:

        reg=/\Bc/;

        str='nice';

        reg.exec(str);

这次会成功地匹配到中间的c

数字与非数字

\d表示数字的意思,相反,\D表示非数字。例如:

        reg=/\d/;

        str='yfzhou888';

        reg.exec(str);

结果返回第一个8,因为它是第一个数字字符

        reg=/\D/;

        str='yfzhou888';

        reg.exec(str);

返回y,第一个非数字字符

应用:文本框中只能输入数字

<inputtype="text"id="txtAge"/>

vartxtAge=document.getElementById("txtAge");

txtAge.onkeypress=function (event) {

    vare=event||window.event;

    var keyCode=e.which||e.keyCode;

    var str=String.fromCharCode(keyCode);

    var reg=/\d|[\u0008]/;

    return reg.test(str);

}

空格及非空格

\s匹配单个空格

        reg=/\s.+/;

        str='This is a test string';

        reg.exec(str);

结果返回is a test string

正则的意思是匹配第一个空格以及其后的所有非换行字符。

同样,\S表示非空格字符。

        reg=/\S+/;

        str='This is a test string';

        reg.exec(str);

匹配结果为This,当遇到第一个空格之后,正则就停止匹配了

单词字符

\w表示单词字符,等同于字符集合[a-zA-Z0-9_]。例如:

        reg=/\w+/;

        str='This is a test string';

        reg.exec(str);

匹配到This,因为其后的空格不属于单词字符

        reg=/\w+/;

        str='.className';

        reg.exec(str);

匹配了字符串中的className,因为第一个”.”不属于单词字符

        reg=/\w+/;

        str='中文会匹配吗?';

        reg.exec(str);

试图用单词字符去匹配中文自然行不通了,返回null。

\W表示非单词字符,等效于[^a-zA-Z0-9_]

        reg=/\W+/;

        str='中文会匹配吗?';

        reg.exec(str);

返回完整的字符串,因为,无论是中文和”?”都算作是非单词字符。

应用:文本框中只允许输入中文

<inputtype="text"id="txtName"/>

vartxtName=document.getElementById("txtName");

txtName.onkeypress=function (event) {

    var e=event||window.event;

    var keyCode=e.which?e.which:e.keyCode;

    var str=String.fromCharCode(keyCode);

    var reg=/[\u4e00-\u9fa5]|[\u0008]/;

    return reg.test(str);

}


document.getElementById("name").onkeydown = function () {

    if (event.ctrlKey && event.keyCode == 86) {

        event.returnValue = false;

    }

}

 

document.getElementById("name").onkeypress = function () {

    var reg = /[\u4e00-\u9fa5]|[\u0008]/;

    var key = String.fromCharCode(event.keyCode);

    return reg.test(key);

}

正则表达式的修饰符

全局匹配,修饰符g

形式:/pattern/g

应用:去掉字符串两端的空格

String.prototype.trim=function () {

    returnthis.replace(/(^\s+)|(\s+$)/g,'');

}

 

varstr="     中华人民共和国         ";

alert(str.trim().length);

不区分大小写,修饰符i

形式:/pattern/i


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值