视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript笔记之表单和正则表达式
2020-11-27 20:30:49 责编:小采
文档


正则表达式是一种对文本字符串进行验证和格式化的极其强大的方式。通过使用正则表达式,可以用一两行JavaScript代码完成原本需要几十行代码的复杂任务。
正则表达式是一种特殊符号编写的模式,描述一个或多个文本字符串,常常被认为是编程中最棘手的部分之一,但是只要把混乱的正则表达式分解成有意义的小块,其语法并不难理解。
下面的一个例子,是用正则表达式验证电子邮件地址:
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Email Validation</title>
<link type="text/css" rel="stylesheet" href="http://www.gxlcms.com/"> <script type="text/javascript" src="script01.js"></script>
</head>
<body>
<h2 align="center">Email Validation</h2>
<form action="someAction.cgi">
<p><label>Email Address:
<input class="email" type="text" size="50" /></label></p>
<p><input type="reset" /> <input type="submit" value="Submit" /></p>
</form>
</body>
</html>

script01.css
[css]
body {
color: #000;
background-color: #FFF;
}

input.invalid {
background-color: #FF9;
border: 2px red inset;
}

label.invalid {
color: #F00;
font-weight: bold;
}

script01.js
[javascript]
window.onload = initForms;

function initForms() {
for (var i=0; i< document.forms.length; i++) {
document.forms[i].onsubmit = function() {return validForm();}
}
}

function validForm() {
var allGood = true;
var allTags = document.getElementsByTagName("*");

for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;

function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");

for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}

thisTag.className = outClass;

if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;

function validBasedOnClass(thisClass) {
var classBack = "";

switch(thisClass) {
case "":
case "invalid":
break;
case "email":
if (allGood && !validEmail(thisTag.value)) classBack = "invalid ";
default:
classBack += thisClass;
}
return classBack;
}

function validEmail(email) {
<span style="color:#ff0000;">var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

</span> return re.test(email);
}

function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}
}

现在开始解释红色代码行:
正则表达式总是以斜杠(/)开头和结尾。
脱字符(^)表示要使用这个表达式检查以特定的字符串开头的字符串。
表达式\w表示任意单一字符,包括a~z、A~Z、0~9或下划线。
加号+表示要寻找前面条目的一次或多次出现。
前圆括号(表示一个组。
方括号[]用来表示可以出现其中任意一个字符,这个方括号内包含字符\.-,但是点号对于正则表达式是有特殊意义的,所以需要在它前面加上反斜杠\,这表示指的实际上是点号本身,而不是它的特殊意义。在特殊字符串前面使用反斜杠称为“对字符转义”。
问号?表示前面的条目可以不出现或出现一次。问号后再次使用\w+,表示点号或连字符后面必须有其他一些字符。
后圆括号表示这个组结束了。在此后是一个星号*,表示前面的条目可以不出现或出现多次。
@字符仅仅代表它本身,没有任何其他意义。
接下来再次使用\w+,表示域名必须以一个或多个a~z、A~Z、0~9或下划线开头。在此之后同样是([\.-]?\w+)*,这表示电子邮件地址的后缀中允许有点号或连字符。
然后,在一对圆括号中建立另一个组:\.\w{2,3},表示希望找到一个点号,后面跟着一些字符。花括号中的数字表示前面的条目可以出现2次或3次。
最后正则表达式的末尾是一个美元符号$,表示匹配的字符串必须在这里结束。

return re.test(email);这一行获得前一步中定义的正则表达式,并使用test()方法验证电子邮件的有效性。
如果不用正则表达式,则要使用多出数十行的代码来完成相同的代码
[javascript]
function validEmail(email) {
var invalidChars = " /:,;";

if (email == "") {
return false;
}
for (var k=0; k<invalidChars.length; k++) {
var badChar = invalidChars.charAt(k);
if (email.indexOf(badChar) > -1) {
return false;
}
}
var atPos = email.indexOf("@",1);
if (atPos == -1) {
return false;
}
if (email.indexOf("@",atPos+1) != -1) {
return false;
}
var periodPos = email.indexOf(".",atPos);
if (periodPos == -1) {
return false;
}
if (periodPos+3 > email.length) {
return false;
}
return true;
}

function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}
}
由此可见使用正则表达式确实可以减少大量代码。

下载本文
显示全文
专题