<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript实例</title> <script> window.onload=function (){ var oBtn=document.getElementById('btn'); var oTxt=document.getElementById('txt'); oBtn.onclick=function (){ var re=https://www.jb51.net/\w+@[a-z-]+\.[a-z]+/i; if(re.test(oTxt.value)){ alert('合法邮箱'); } else{ alert('非法邮箱'); } }; }; </script> </head> <body> <input type="text" placeholder="请输入邮箱"> <input type="button" value="验证"> </body> </html>
将我们上面用于分析的邮箱例子abc123_@ss789.xyz拿来检测，OK，合法邮箱，这就没问题了吗？我们再来验证下这个邮箱：正则abc123_@ss789.xyz校验，OK，还是合法邮箱，这邮箱看着都不正规，跟我们之前分析的邮箱样子，长的从本质上都不一样，正则怎么会判断合法呢？这不是我们要的效果，显然是我们的表达式有点小问题，就像之前说的，一般情况下直接将格式描述成表达式，都不会达到预期的效果，那怎么解决呢？先开分析下是什么原因导致的，其实因为正则对象方法test()造成的，该方法有一个特性：只要这个字符串其中的一部分符合要求，就返回true。解决方法其实也很简单，让整个字符串都被正则检测，而不只是检测一部分，所以再加上行首行尾就OK了。其实熟练了正则之后，像这样的小问题，一般也不可能出现，这里的注重点是思路，要养成一种编写代码的思维模式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript实例</title> <script> window.onload=function (){ var oBtn=document.getElementById('btn'); var oTxt=document.getElementById('txt'); oBtn.onclick=function (){ var re=https://www.jb51.net/^\w+@[a-z-]+\.[a-z]+$/i; if(re.test(oTxt.value)){ alert('合法邮箱'); } else{ alert('非法邮箱'); } }; }; </script> </head> <body> <input type="text" placeholder="请输入邮箱"> <input type="button" value="验证"> </body> </html>
现在对刚才的2个邮箱再次验证，第一个合法，第二个非法，这个正则验证邮箱的表达式就没问题了。其实还是不够严谨，现在网站大多要填邮箱的地方，邮箱的服务器地址也就是后缀名如@qq.com等都提供了下拉列表，可供用户选择，如果是需要整个邮箱都自行输入，那么这个正则表达式问题就来了，邮箱的后缀名可以分为几类，其第三部分和最后一部分都是固定的格式，如果使用该表达式验证，那事就大了，因为我们给每一部分定义的都是可输入若干，很显然这是非法的格式，邮箱的后缀是需要做限定的，这里只是简单的做一个实现思路的分析，在真正用的时候，还需要具体问题具体对待。像这种需要验证的东西，前端不可能做到完美，前端就算写的再严谨，也是很容易出问题的，所以这是属于后端干的事，但是前端可以对用户的输入做一个简单的格式验证，只有确保用户输入正确了，再配合后端，那就是事半功倍的。
PS:RegExp几个常用方法说明
1、Test()
RegExpObject.test(string)
判断string中是否有与表达式匹配的字符串，有则返回true,否则返回false
例如
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：true
2、exec()
RegExpObject.exec(string)
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
例如
JScript 代码
var str= "cat2,hat8" ; var reg=https://www.jb51.net/c(at)\\d/ ; 有分组 console.info(reg.exec(str));//运行返回 ["cat2", "at"]
3、Match()
string.match(RegExpObject)
它和exec有类似，也是返回一个数组，但它们有区别。
区别1：如下如果正则中有g，则match返回所有匹配。而exec永远只返回与第一个匹配有关的信息。
区别2：如果没有g，但是有分组，则两个结果一样。或者没有g也没有分组。只返回第一个匹配。
实例
JScript 代码
var someText= "web2.0 .net2.0" ; var pattern=https://www.jb51.net/(\\w+)(\\d)\\.(\\d)/g; var outCome_exec=pattern.exec(someText); ["web2.0","web","2","0"] var outCome_matc=someText.match(pattern); ["web2.0","net2.0"]
4、Search()
stringObject.search(regexp)
返回第一个匹配的起始位置。
5、Replace()
stringObject.replace(regexp/substr,replacement)
返回新替换过后的新字符串。
如果是字符串，替换第一个。如果是正则表达式中有g，则全部替换，否则也是一个。
例如
JScript 代码