现在的位置: 首页 > 综合 > 正文

吴昊品工程级别软件项目 Round 5 —— 用JavaScript实现一个简单的注册登录系统

2012年01月25日 ⁄ 综合 ⁄ 共 5115字 ⁄ 字号 评论关闭

 

  如图所示,此为一个简单的注册登录系统。我们利用JavaScript语言来实现它,在我们提交注册之后,“显示注册信息”这一栏中会给出详细的注册信息。

 

 

   如图,我们可以对页面用右键选中“查看源文件”选项,可以查看到该页面的源代码。整个源码是利用JavaScript语言写成的。以下,我来详细剖析一下整个源码。

  首先,整个源码是用HTML语言嵌入一些JS脚本来实现的。我们可以将其大致分为两个部分,<head>部分和<body>部分。<head>部分相当于android项目中的逻辑代码,而<body>部分则相当于android项目中的布局代码。中间唯一的难点应该就是正则表达式了,需要仔细去剖析。<body>部分又分为两个模块,一个是注册表框,一个是显示表框。

 

  正则表达式 奥义:

  正则表达式英语Regular Expressionregexregexp,缩写为RE正則表達式正规表示法、常规表示法),计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里,正则表达式通常被用来检索、替换那些符合某个模式的文本。


  许多程序设计语言都支持利用正则表达式进行字符串操作。例如,在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件(例如sedgrep)普及开的。正则表达式通常缩写成“regex”,单数regexpregex复数regexpsregexesregexen

 

  正则表达式的基本语法:

 

  一个正则表达式通常被称为一个模式 (pattern),为用来描述或者匹配一系列符合某个句法规则的字符串。例如:HandelHändel Haendel 这三个字符串,都可以由“Ha|ä|(ae)ndel”这个模式来描述。大部分正则表达式的形式都有如下的结构:

  选择

  | 竖直分隔符代表选择。例如“gray|grey”可以匹配greygray

  数量限定

  某个字符后的数量限定符用来限定前面这个字符允许出现的个数。最常见的数量限定符包括“+”、“?”和“*”(不加数量限定则代表出现一次且仅出现一次):

  + 加号代表前面的字符必须至少出现一次。(1次、或多次)。例如,“goo+gle”可以匹配googlegoooglegoooogle;

  ? 问号代表前面的字符最多只可以出现一次。(0次、或1)。例如,“colou?r”可以匹配color或者colour;

  * 星号代表前面的字符可以不出现,也可以出现一次或者多次。(0次、或1次、或多次)。例如,“0*42”可以匹配42042004200042等。

  匹配

  圆括号可以用来定义操作符的范围和优先度。例如,“gr(a|e)y”等价于“gray|grey”,“(grand)?father”匹配fathergrandfather

  上述这些构造子都可以自由组合,因此,“H(ae?|ä)ndel”和“H(a|ae|ä)ndel”是相同的。

  精确的语法可能因不同的工具或程序而异。

 

   正则表达式的一个简单实现:

   Highlights:

  在这段代码中大量地使用了C指针。在递归的每个阶段,如果存在某个字符匹配,那么在随后的递归调用中将执行指针算法(例如,regexp+1 and text+1),这样在随后的函数调用中,参数就是正则表达式的下一个字符和text的下一个字符。递归的深度不会超过匹配模式的长度,而通常情况下匹配模式的长度都是很短的,因此不会出现耗尽内存空间的危险。

 1  /*
 2    函数match(regexp,text)用来判断文本中是否出现正则表达式;如果找到了一个匹配的正则表达式则返回1,否则返回0。
 3 
   如果有多个匹配的正则表达式,那么函数将找到文本中最左边的并且最短的那个。
 4  */
 5  int match(char *regexp, char *text) 
 6  {         
 7    /*

 8      如果正则表达式中的第一个字符是^(固定位置的匹配),那么匹配就一定要出现在字符串的开头。
 9 
     也就是说,如果正则表达式是^xyz,那么仅当xyz出现在文本的开头而不是中间的某个位置时才会匹配成功。
10 
     在代码中通过把正则表达式的剩余部分与文本的起始位置而不是其他地方进行匹配来判断。
11 
     如果第一个字符不是^,那么正则表达式就可以在字符串中的任意位置上进行匹配。
12 
     在代码中通过把模式依次与文本中的每个字符位置进行匹配来判断。如果存在多个匹配,那么代码只会识别第一个(最左边的)匹配。
13 
     也就是说,如果则在表达式是xyz,那么将会匹配第一次出现的xyz,而且不考虑这个匹配出现在什么位置上。
14    */
15    if (regexp[0] == '^')   
16      return matchhere(regexp+1, text);
17    /*

18      对输入字符串的推进操作是在一个do-while循环中进行的,这种结构在C程序中使用相对较少。
19 
     在代码中使用do-while而不是while通常会带来疑问:为什么不在循环的起始处判断循环条件,而是在循环末尾当执行完了某个操作之后才进行判断呢?
20 
     不过,这里的判断是正确的:由于*运算符允许零长度的匹配,因此我们首先需要判断是否存在一个空的匹配。
21    */            
22    do 
23    {      
24      //大部分匹配工作是在matchhere函数中完成的 

25      if (matchhere(regexp, text))    
26        return 1;        
27    } 
28    while (*text++ != '/0');   
29    return 0;  
30  }  
31  
32  /*

33    这个函数将判断正则表达式与文本的开头部分是否匹配。
34 
   函数matchhere把正则表达式的第一个字符与文本的第一个字符进行匹配。
35 
   如果匹配失败,那么在这个文本位置上就不存在匹配,因此matchhere将返回0。 
36  */ 
37  int matchhere(char *regexp, char *text) 
38  { 
39    /*

40      由于存在着一些特殊的情况,以及需要设置终止递归的条件。
41 
     因此实际的处理过程要更为复杂些最简单的情况就是,当正则表达式推进到末尾时(regexp[0] == '/0'),所有前面的判断都成功了。
42 
     那么这个正则表达式就与文本匹配。
43    */  
44    if (regexp[0] == '/0')           
45      return 1;
46    //如果正则表达式是一个字符后面跟着一个*,那么将会调用matchstar来判断闭包(closure)是否匹配。         

47    if (regexp[1] == '*')    
48      return matchstar(regexp[0], regexp+2, text);    
49    //如果在正则表达式的末尾包含了一个$,那么仅当text此时位于末尾时才会匹配成。 

50    if (regexp[0] == '$' && regexp[1] == '/0')     
51      return *text == '/0';     
52    /*

53      如果匹配成功了,函数将推进到正则表达式的下一个字符和文本的下一个字符继续进行匹配。
54 
     这是通过递归地调用matchhere函数来实现的。
55    */ 
56    if (*text!='/0' && (regexp[0]=='.' || regexp[0]==*text))    
57      return matchhere(regexp+1, text+1);     
58    return 0;   
59  }   
60  
61  /*
 
62 
   函数matchstar(c, regexp, text)将尝试匹配重复的文本字符c,
63 
   从零重复开始并且不断累加,直到匹配text的剩余字符,如果匹配失败,那么函数就认为不存在匹配。
64 
   这个算法将识别出一个“最短的匹配”,这对简单的模式匹配来说是很好的,例如grep,这种情况下的主要问题是尽可能快地找到一个匹配。
65 
   而对于文本编辑器来说,“最长的匹配”则是更为直观,且肯定是更好的,因为通常需要对匹配的文本进行替换。
66 
   在目前许多的正则表达式库中同时提供了这两种方法,在《The Practice of Programming》一书中给出了基于本例中matchstar函数的一种简单变形
67 
   我们在后面将给出这种形式。
68  */    
69  int matchstar(int c, char *regexp, char *text) 
70  {   
71    do 
72    {
73      /* a * matches zero or more instances */   
74      if (matchhere(regexp, text))     
75        return 1;       
76    } 
77    while (*text != '/0' && (*text++ == c || c == '.'));  
78    return 0;    
79  }

 

  正则表达式的实际运用:

  1.验证用户名和密码:("^[a-zA-Z]\w{5,15}$")正确格式:"[A-Z][a-z]_[0-9]"组成,并且第一个字必须为字母6~16位;


   2.验证电话号码:("^(\d{3.4}-)\d{7,8}$")正确格式:xxx/xxxx-xxxxxxx/xxxxxxxx

  3.验证身份证号(15位或18位数字):("^\d{15}|\d{18}$");

  4.验证Email地址:("^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$")

  5.只能输入由数字和26个英文字母组成的字符串:("^[A-Za-z0-9]+$") ;

  6.整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$

  7.只能输入数字:"^[0-9]*$"

  8.只能输入n位的数字:"^\d{n}$"

  9.只能输入至少n位的数字:"^\d{n,}$"

  10.只能输入m~n位的数字:。"^\d{m,n}$"

  11.只能输入零和非零开头的数字:"^(0|[1-9][0-9]*)$"

  12.只能输入有两位小数的正实数:"^[0-9]+(.[0-9]{2})?$"

  13.只能输入有1~3位小数的正实数:"^[0-9]+(.[0-9]{1,3})?$"

  14.只能输入非零的正整数:"^\+?[1-9][0-9]*$"

  15.只能输入非零的负整数:"^\-[1-9][]0-9"*$

  16.只能输入长度为3的字符:"^.{3}$"

  17.只能输入由26个英文字母组成的字符串:"^[A-Za-z]+$"

  18.只能输入由26个大写英文字母组成的字符串:"^[A-Z]+$"

  19.只能输入由26个小写英文字母组成的字符串:"^[a-z]+$"

  20.验证是否含有^%&',;=?$\"等字符:"[^%&',;=?$\x22]+"

  21.只能输入汉字:"^[\u4e00-\u9fa5]{0,}$"

  22.验证URL"^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"

  23.验证一年的12个月:"^(0?[1-9]|1[0-2])$"正确格式为:"01""09""1""12"

  24.验证一个月的31天:"^((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为;"01""09""1""31"

  25.获取日期正则表达式:\d{4}[|\-|\.]\d{\1-\12}[

抱歉!评论已关闭.