Home > Developer > JavaScript
Regular Expressions are an extremely powerful way to verify and format text strings. By using regular expressions, you can use one or two lines of JavaScript code to complete complex tasks that originally required dozens of lines of code.
A regular expression is a special notation. It describes one or more text strings and is often considered one of the most tricky parts of programming, however, as long as the chaotic regular expression is divided into meaningful small pieces, its syntax is not difficult to understand.
The following example uses a regular expression to verify the email address:
[Html]
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Email Validation </title>
<Link type = "text/css" rel = "stylesheet" href = "script01.css"/>
<Script type = "text/javascript" src = "script01.js"> </script>
</Head>
<Body>
<H2 align = "center"> Email Validation <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 ";
}
}
}
}
Now let's start to explain the red lines:
Regular Expressions always start and end with a slash.
The Escape Character (^) indicates that you want to use this expression to check strings starting with a specific string.
Expression \ w represents any single character, including ~ Z, ~ Z, 0 ~ 9 or underline.
The plus sign + indicates that you want to search for the front noodle for one or more times.
Parentheses (representing a group.
Square brackets [] are used to indicate that any character can appear. This square brackets contain the character \. -, but the dot is of special significance to the regular expression. Therefore, you need to add a backslash (\) before it, which indicates that it actually refers to the dot itself, rather than its special meaning. A backslash is used before a special string to call it "Escape Character ".
Question mark? It indicates that the previous entry may not appear or appear once. .
Parentheses indicate that the group is over. The asterisk (*) indicates that the previous entry may not appear or appear multiple times.
The @ character only represents itself and has no other meaning.
Next, use \ w + again, indicating that the domain name must start with one or more ~ Z, ~ Z, 0 ~ Start with 9 or an underscore. After that, it is also ([\.-]? \ W +) *, which indicates that the suffix of the email address can contain numbers or hyphens.
Then, create another group in a pair of parentheses: \. \ w {2, 3}, indicating that you want to find a dot, followed by some characters. The numbers in braces indicate that the preceding entries can appear twice or three times.
The end of the regular expression is a dollar sign $, indicating that the matched string must end here.
Return re. test (email); this row obtains the regular expression defined in the previous step, and uses the test () method to verify the validity of the email.
If regular expressions are not required, dozens of lines of code are required to complete the same code.
[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 ";
}
}
}
}
It can be seen that using regular expressions can indeed reduce a lot of code.
For more detailed introduction to regular expressions, see: http://www.bkjia.com/kf/201108/99384.html
From Yanghai
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
