常用正则整理

一种简单的正则表达式验证工具:浏览器的地址栏!

输入javascript:/^\s*$/.test(” “); 回车后,得到true;

输入javascript:/^\s*$/.test(“0”); 回车后,得到false。

常用正则:

javascript:/^\s*$/.test(" ");
javascript:/^\d+$/.test("0123456789");
javascript:/^[1-9]\d*$/.test("1234567890");
javascript:/^- ( :\d+|\d{1,3}( :,\d{3})+)( :\.\d+) $/.test("-233,323,432.323456");
javascript:/^- ( :\d+|\d{1,3}( :\.\d{3})+)( :,\d+) $/.test("232.232.292,2533");
javascript:/^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test("2008-11-29");
javascript:/^\d\d \.\d\d \.\d\d\d \d $/.test("11.29.2008");

email

8./^((([a-z]|\d|[!#\$%&'\*\+\-\/=\ \^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\ \^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a)) (\x20|\x09)+) (([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a)) (\x20|\x09)+) (\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\. $/i.test(email);

url

9./^(https |ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@) (((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\. )(:\d*) )(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*) ) (\ ((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\ )*) (\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\ )*) $/i.test(url);

参考:jquery.validate.js

flex中的restrict详解

除 .$ ^ { [ ( | ) * +   \ 外,其他字符与自身匹配。
但是其中并未注明这些字符应该匹配为什么字符。
为了方便自己以后查阅,也为了方便网友搜索我就写在这里了。
[Sipo]
点的转义:.  ==> \\u002E
美元符号的转义:$  ==> \\u0024
乘方符号的转义:^  ==> \\u005E
左大括号的转义:{  ==> \\u007B
左方括号的转义:[  ==> \\u005B
左圆括号的转义:(  ==> \\u0028
竖线的转义:| ==> \\u007C
右圆括号的转义:) ==> \\u0029
星号的转义:*  ==> \\u002A
加号的转义:+  ==> \\u002B
问号的转义:   ==> \\u003F
反斜杠的转义:\ ==> \\u005C

 

 

Flex当中大家都知道有些标签restrict,这个属性用处很大的。对一些正则表达式都使用,跟以前的javascript是一样的。

 

下面是我封装FLex当中的textInput的restrict:

 

package common
{
 import mx.controls.TextInput;

 public class textInputRscdCode extends TextInput
 {
  public function textInputRscdCode()
  {
      this.restrict=”0-9 a-z A-Z ~ ! # %  \\^ & \\* ( ) \\- _ = + \\\\ | , . < > /   “;
   super();
  }
 }
}

 

表明在页面的输入框中只能让它输入这些东西。其他的不行。

 

 

 

 

<!—-><!—-><!—->

js常用正则表达式实例

匹配中文字符的正则表达式: [\u4e00-\u9fa5] 

匹配双字节字符(包括汉字在内):[^\x00-\xff] 

应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 

String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;} 

匹配空行的正则表达式:\n[\s| ]*\r 

匹配HTML标记的正则表达式:/<(.*)>.*<\/\1>|<(.*) \/>/  

匹配首尾空格的正则表达式:(^\s*)|(\s*$) 

应用:javascript中没有像vbscript那样的trim函数,我们就可以利用这个表达式来实现,如下: 

String.prototype.trim = function() 

return this.replace(/(^\s*)|(\s*$)/g, ""); 

利用正则表达式分解和转换IP地址: 

下面是利用正则表达式匹配IP地址,并将IP地址转换成对应数值的Javascript程序: 

function IP2V(ip) 

re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正则表达式 
if(re.test(ip)) 

return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1 

else 

throw new Error("Not a valid IP address!") 

不过上面的程序如果不用正则表达式,而直接用split函数来分解可能更简单,程序如下: 

var ip="10.100.20.168" 
ip=ip.split(".") 
alert("IP值是:"+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1)) 

匹配Email地址的正则表达式:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 

匹配网址URL的正则表达式:http://([\w-]+\.)+[\w-]+(/[\w- ./ %&=]*)  

利用正则表达式去除字串中重复的字符的算法程序:[注:此程序不正确,原因见本贴回复] 

var s="abacabefgeeii" 
var s1=s.replace(/(.).*\1/g,"$1") 
var re=new RegExp("["+s1+"]","g") 
var s2=s.replace(re,"")  
alert(s1+s2) //结果为:abcefgi 

这个方法对于字符顺序有要求的字符串可能不适用。 

得用正则表达式从URL地址中提取文件名的javascript程序,如下结果为page1 

s="http://www.9499.net/page1.htm" 
s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2") 
alert(s) 

利用正则表达式限制网页表单里的文本框输入内容: 


正则表达式限制只能输入中文:onkeyup="value="/value.replace(/["^\u4E00-\u9FA5]
/g,’’)" onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\u4E00-\u9FA5]/g,’’))" 

用正则表达式限制只能输入全角字符: onkeyup="value="/value.replace(/["^\uFF00-
\uFFFF]/g,’’)" onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\uFF00-\uFFFF]/g,’’))" 

用正则表达式限制只能输入数字:onkeyup="value="/value.replace(/["^\d]
/g,’’) "onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,’’))" 

用正则表达式限制只能输入数字和英文:onkeyup="value="/value.replace(/[\W]
/g,"’’) "onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,’’))"

JavaScript实现trim()函数

JavaScript利用正则表达式来实现trim()的功能。

特意将trim()函数分解成lefttrim()和righttrim()函数,以适应不同的应用

function leftTrim(str){

    return str.replace(/^ +/, “”);

}

function rigthTrim(str){

    return str.replace(/ +$/, “”);

}

function trim(str){

    return leftTrim(rightTrim(str));

}

常用的JavaScript验证正则表达式

下面都是我收集的一些比较常用的正则表达式,因为平常可能在表单验证的时候,用到的比较多。特发出来,让各位朋友共同使用。呵呵。

匹配中文字符的正则表达式: [u4e00-u9fa5]

评注:匹配中文还真是个头疼的事,有了这个表达式就好办了

匹配双字节字符(包括汉字在内):[^x00-xff]

评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)

匹配空白行的正则表达式:ns*r

评注:可以用来删除空白行

匹配HTML标记的正则表达式:< (S* )[^>]*>.* |< .*  />

评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力

匹配首尾空白字符的正则表达式:^s*|s*$

评注:可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式

匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*

评注:表单验证时很实用

匹配网址URL的正则表达式:[a-zA-z]+://[^s]*

评注:网上流传的版本功能很有限,上面这个基本可以满足需求

匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$

评注:表单验证时很实用

匹配国内电话号码:d{3}-d{8}|d{4}-d{7}

评注:匹配形式如 0511-4405222 或 021-87888822

匹配腾讯QQ号:[1-9][0-9]{4,}

评注:腾讯QQ号从10000开始

匹配中国邮政编码:[1-9]d{5}( !d)

评注:中国邮政编码为6位数字

匹配身份证:d{15}|d{18}

评注:中国的身份证为15位或18位

匹配ip地址:d+.d+.d+.d+

评注:提取ip地址时有用

匹配特定数字:

^[1-9]d*$    //匹配正整数

^-[1-9]d*$   //匹配负整数

^- [1-9]d*$   //匹配整数

^[1-9]d*|0$  //匹配非负整数(正整数 + 0)

^-[1-9]d*|0$   //匹配非正整数(负整数 + 0)

^[1-9]d*.d*|0.d*[1-9]d*$   //匹配正浮点数

^-([1-9]d*.d*|0.d*[1-9]d*)$  //匹配负浮点数

^- ([1-9]d*.d*|0.d*[1-9]d*|0 .0+|0)$  //匹配浮点数

^[1-9]d*.d*|0.d*[1-9]d*|0 .0+|0$   //匹配非负浮点数(正浮点数 + 0)

^(-([1-9]d*.d*|0.d*[1-9]d*))|0 .0+|0$  //匹配非正浮点数(负浮点数 + 0)

评注:处理大量数据时有用,具体应用时注意修正

匹配特定字符串:

^[A-Za-z]+$  //匹配由26个英文字母组成的字符串

^[A-Z]+$  //匹配由26个英文字母的大写组成的字符串

^[a-z]+$  //匹配由26个英文字母的小写组成的字符串

^[A-Za-z0-9]+$  //匹配由数字和26个英文字母组成的字符串

^w+$  //匹配由数字、26个英文字母或者下划线组成的字符串

在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:

只能输入数字:“^[0-9]*$”

只能输入n位的数字:“^d{n}$”

只能输入至少n位数字:“^d{n,}$”

只能输入m-n位的数字:“^d{m,n}$”

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

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

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

只能输入非零的正整数:“^+ [1-9][0-9]*$”

只能输入非零的负整数:“^-[1-9][0-9]*$”

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

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

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

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

只能输入由数字和26个英文字母组成的字符串:“^[A-Za-z0-9]+$”

只能输入由数字、26个英文字母或者下划线组成的字符串:“^w+$”

验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为:以字母开头,长度在6-18之间,

只能包含字符、数字和下划线。

验证是否含有^%&’,;= $”等字符:“[^%&’,;= $x22]+”

只能输入汉字:“^[u4e00-u9fa5],{0,}$”

验证Email地址:“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”

验证InternetURL:“^http://([w-]+.)+[w-]+(/[w-./ %&=]*) $”

验证电话号码:“^((d{3,4})|d{3,4}-) d{7,8}$”

正确格式为:“XXXX-XXXXXXX”,“XXXX-XXXXXXXX”,“XXX-XXXXXXX”,

“XXX-XXXXXXXX”,“XXXXXXX”,“XXXXXXXX”。

验证身份证号(15位或18位数字):“^d{15}|d{}18$”

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

验证一个月的31天:“^((0 [1-9])|((1|2)[0-9])|30|31)$”

正确格式为:“01”“09”和“1”“31”。

匹配中文字符的正则表达式: [u4e00-u9fa5]

匹配双字节字符(包括汉字在内):[^x00-xff]

匹配空行的正则表达式:n[s| ]*r

匹配HTML标记的正则表达式:/< (.*)>.*|< (.*) />/

匹配首尾空格的正则表达式:(^s*)|(s*$)

匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*

匹配网址URL的正则表达式:http://([w-]+.)+[w-]+(/[w- ./ %&=]*) 

(1)应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)

String.prototype.len=function(){return this.replace([^x00-xff]/g,”aa”).length;}

(2)应用:javascript中没有像vbscript那样的trim函数,我们就可以利用这个表达式来实现

String.prototype.trim = function()

{

return this.replace(/(^s*)|(s*$)/g, “”);

}

(3)应用:利用正则表达式分解和转换IP地址

function IP2V(ip) //IP地址转换成对应数值

{

re=/(d+).(d+).(d+).(d+)/g //匹配IP地址的正则表达式

if(re.test(ip))

{

return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1

}

else

{

throw new Error(”Not a valid IP address!”)

}

}

(4)应用:从URL地址中提取文件名的javascript程序

s=”http://www.9499.net/page1.htm”;

s=s.replace(/(.*/){0,}([^.]+).*/ig,”$2″) ; //Page1.htm

(5)应用:利用正则表达式限制网页表单里的文本框输入内容

用正则表达式限制只能输入中文:onkeyup=”value=”/blog/value.replace(/[“^u4E00-u9FA5]/g,”) ” onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^u4E00-u9FA5]/g,”))”

用正则表达式限制只能输入全角字符: onkeyup=”value=”/blog/value.replace(/[“^uFF00-uFFFF]/g,”) ” onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^uFF00-uFFFF]/g,”))”

用正则表达式限制只能输入数字:onkeyup=”value=”/blog/value.replace(/[“^d]/g,”) “onbeforepaste= “clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^d]/g,”))”

用正则表达式限制只能输入数字和英文:onkeyup=”value=”/blog/value.replace(/[W]/g,””) “onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^d]/g,”

各种工具之正则表达式语法比较

在各种常用的工具中,
正则表达式如此的相似却又不同。
下表列出了一些常用的正则表达式,以及其不同之处。
项目总多,遗漏必有不少,请各位看官不吝指出。
以perl的正则为基准,不同的用法以粉红色标出。

 

grep 2.5.1 egrep 2.5.1 sed 3.02
sed 4.07
awk 3.1.1 perl 5.8.0 vim 6.1 JavaScript   
转义 \ \ \ \ \ \ \
行头 ^ ^ ^ ^ ^ ^ ^
行尾 $ $ $ $ $ $ $
n个 {n} {m,n} {m,} {,n} \{n\} {n} \{n\} {n}或\{n\} 仅定义 –posix 或 –re-interval有效(要表达}和{,得用\\{和\\} 没有定义–posix或–re-interval时,不能用{n}的语法, \}\{和}{同义 {n} \{n\} {n}
{0,} * * * *或\*, (要表达*,得用\\*) * * *
{1,} \+ + \+ +或\+, (要表达+, 得用\\+) + \+ +
{0,1}    或\ , (要表达 , 得用\\ )    
任意字符 . . . . 含\n. . /s修饰后则含\n . 除\n . 除\n
(pat) 匹配并获结果 \(pat\) (pat) \(pat\) (pat)或\(pat\) (要表达括号,用\\( \\) ) (pat) \(pat\) (pat)
( :pat) 匹配但不获结果 不支持 不支持 不支持 不支持 ( :pat) 不支持 ( :pat)
( =pat) 等于预查 不支持 不支持 不支持 不支持 ( =pat) 不支持 ( =pat)
( !pat) 不等预查 不支持 不支持 不支持 不支持 ( !pat) 不支持 ( !pat)
| 或 \| | \| |或\| (要表达|,得用\\|) | \| |
其中任意字符 [xyz] [xyz] [xyz] [xyz] [xyz] [xyz] [xyz]
[.ch.] [=ch=] 不支持 不支持 [.ch.] 不支持 不支持 不支持 不支持
单词边界 \b \b \b \b 不支持 \b 不支持 \b
非单词边界 \B \B \B \B 不支持 \B 不支持 \B
单词左右边界 <> \< \> \< \> \< \> 不支持 (><和\>\<和\\>\\<同义 不支持(><和\>\<同义 \< \> 不支持(><和\>\<同义
控制字符 /cx 不支持 不支持 \cx 不支持 \cx 不支持 \cx
数字\d 不支持 不支持 不支持 不支持 \d \d \d
非数字\D 不支持 不支持 不支持 不支持 \D \D \D
换页 \f 不支持 不支持 高版本支持 \f \f 另义 \f表示文件名字符 \f
换行 \n 不支持 不支持 不支持 \n \n \n \n
回车 \r 不支持 不支持 \r \r \r \r \r
空白 \s 不支持 不支持 不支持 不支持 \s \s \s
非空白 \S 不支持 不支持 不支持 不支持 \S \S \S
制表符 \t 不支持 不支持 高版本支持 \t \t \t \t
垂直制表符 \v 不支持 不支持 高版本支持 \v \v 另义 \v表示very magic \v
单词字符 \w [A-Za-z0-9_] \w \w \w 不支持 \w \w \w
非单词字符 \W [^A-Za-z0-9] \W \W \W 不支持 \W \W \W
\xn 16进制 不支持 不支持 高版本支持 \xn \xn 另义 \x表示[0-9A-Za-z] \xn
\n 八进制 不支持 不支持 不支持 \n \n 不支持 \n
\n 后向引用 \n \n \n \n 仅取结果可用 \n \n 仅取结果可用 \n
[:alnum:] 字母和数字 [:alnum:] [:alnum:] [:alnum:] [:alnum:] [:alnum:] [:alnum:] 不支持
[:alpha:] 字母 [:alpha:] [:alpha:] [:alpha:] [:alpha:] [:alpha:] [:alpha:] 不支持
[:cntrl:] 控制字符 [:cntrl:] [:cntrl:] [:cntrl:] [:cntrl:] [:cntrl:] [:cntrl:] 不支持
[:digit:] 数字 [:digit:] [:digit:] [:digit:] [:digit:] [:digit:] [:digit:] 不支持
[:graph:] 可打印字符(不含空格) [:graph:] [:graph:] [:graph:] [:graph:] [:graph:] [:graph:] 不支持
[:lower:] 小写 [:lower:] [:lower:] [:lower:] [:lower:] [:lower:] [:lower:] 不支持
[:print:] 可打印字符(含空格) [:print:] [:print:] [:print:] [:print:] [:print:] [:print:] 不支持
[:punct:] 标点 [:punct:] [:punct:] [:punct:] [:punct:] [:punct:] [:punct:] 不支持
[:space:] 空格 [:space:] [:space:] [:space:] [:space:] [:space:] [:space:] 不支持
[:upper:] 大写字母 [:upper:] [:upper:] [:upper:] [:upper:] [:upper:] [:upper:] 不支持
[:xdigit:] 16进制数字 [:xdigit:] [:xdigit:] [:xdigit:] [:xdigit:] [:xdigit:] [:xdigit:] 不支持
[:return:] 不支持 不支持 不支持 不支持 不支持 [:return:] 不支持
[:tab:] 不支持 不支持 不支持 不支持 不支持 [:tab:] 不支持
[:escape:] 不支持 不支持 不支持 不支持 不支持 [:escape:] 不支持
[:backspace:] 不支持 不支持 不支持 不支持 不支持 [:backspace:] 不支持

 

 

转载自http://blog.chinaunix.net/u/634/showart.php id=2466

jquery学习之—构建功能型表单(二)

构建功能型表单(一)
中介绍了一些适用于用户进行文本性输入的表单功能。

然而,有时候表单中的内容也会以数字为主。

当处理作为表单内容的数字值时,也可以实现另外几种表单增强功能。

 

数字表单的典型代表就是购物车。在购物车表单中,应该允许用户更新购买的商品数量,同时,也要为用户提供价格和总金额的数字反馈。

 

构建功能行表单(二)


1.在操作表单前先为表格应用标准的行条纹效果,美化一下表格的外观

var stripe = function(){
    $("#cart tbody tr:visible:even").removeClass("odd").addClass("even");
    $("#cart tbody tr:visible:odd").removeClass("even").addClass("odd");
}

 

2.拒绝非数字输入

通过javascript,可以检查用户输入的内容是否符合我们的要求,以便在将表单发送到服务器之前对用户给出反馈,这种技术叫做输入掩码。
输入验证是根据某些有效输入的标准来检查用户输入的过程。输入掩码会在用户填写内容的同时应用标准,并简单地禁止无效的按键操作。
比如,在这个购物车表单的例子中,必须在输入字段中填写数字。通过使用输入掩码验证,可以在这些字段获得焦点时,让非数字按键操作不起作用

$(".quantity input").keypress(function(event){
    if(event.charCode && (event.charCode < 48 || event.charCode > 57)){
        event.preventDefault();
    }
});

在这里我们要观察的是keypress事件,这个事件不提供keyCode属性,但提供了charCode属性。

调用preventDefault()方法会阻止浏览器响应相应的事件。

 

3.数字计算

表单中有个recalculate按钮,单击这个按钮会把表单提交到服务器,重新计算总金额再把表单展示给用户。但是这个往返过程是不必要的,所有工作都可以在浏览器中通过jquery来完成。

在shipping行中显示订购商品的数量。但用户修改了其中一行的数量时,我们要合计所有输入值以得到新的数量,然后将总数显示在相应的单元格中。

$(".quantity input").change(function(){
	var totalQuantity = 0;
	$("#cart tbody tr").each(function(){
		var quantity = parseInt($(".quantity input",this).val());
		totalQuantity += quantity;
	});
	$(".shipping .quantity").text(String(totalQuantity));
});

我们只有在change事件发生时执行计算。这样,只有当用户离开字段并填写了同以前不一样的值时,才会导致重新计算总数量。

 

a.解析和格式化货币值

var price = parseFloat($(".price",this).text().replace(/^[^\d.]*/,""));
price = isNaN(price)   0 : price;
var cost = quantity * price;
$(".cost",this).text("$"+cost);

 用正则表达式去掉价格前的货币符号,然后把得到的字符传递给parseFloat(),把价格转成浮点数。

我们必须确保找到了数字值,如果没有则将其设置为0。最后,用价格乘以数量,再与$连接放到总费列中

 

b.处理小数位

用toFixed方法返回一个舍入到相应小数位后的浮点数的字符串

 

c.其他计算

1.合计subtotal行最后一列的总费用。

$(".quantity input").change(function(){
	var totalQuantity = 0;
	var totalCost = 0;
	$("#cart tbody tr").each(function(){
		var price = parseFloat($(".price",this).text().replace(/^[^\d.]*/,""));
		price = isNaN(price)   0 : price;
		var quantity = parseInt($(".quantity input",this).val());
		var cost = quantity * price;
		$(".cost",this).text("$"+cost.toFixed(2));
		totalQuantity += quantity;
		totalCost += cost;
	});
	$(".shipping .quantity").text(String(totalQuantity));
	$(".subtotal .cost").text("$" + totalCost.toFixed(2));
});

 

2.计算税金

为了计算税金,需要用相应的数字除以100得到税率,再用合计金额乘以税率。不过,计算税金时总要向上舍入的,因此必须保证在显示和计算时使用正确的值。

在这里,我们用税金乘以100会使它变成一个以分而不是元表示的值,通过Math.ceil()舍入这个值是安全的。舍入之后,再除以100就可以将这个值转换回以元表示的值。

var taxRate = parseFloat($(".tax .price").text())/100;
var tax = Math.ceil(totalCost * taxRate * 100)/100;
$(".tax .cost").text("$" + tax.toFixed(2));
totalCost += tax;

 

3.计算运费

用商品数量乘以单件商品的运输费率就可以得到总运费

var shippingRate = parseFloat($(".shipping .price").text().replace(/^[^\d.]*/,""));
var shipping = totalQuantity * shippingRate;
$(".shipping .cost").text("$" + shipping.toFixed(2));
totalCost += shipping;

 

现在我们已经完全重写了可能发生的任何服务器计算。因此,可以安全的隐藏recalculate按钮了

 

4.删除商品

如果购物者在把商品放到购物车中之后改变了注意,可以将相应商品的quantity字段修改为0。然而,我们还可以提供一种更可靠的行为,即为每件
商品都添加一个明确的delete按钮。虽然单击这个按钮的实际效果与修改quantity字段相同,但这种视觉上的反馈可以强化不会购买相应商品的事
实。

$("<th>&nbsp;</th>").insertAfter("#cart thead th:nth-child(2)");
$deleteButton = '<img src="images/delete.gif" width="16" height="16" title="remove from cart" alt="remove from cart" class="clickable" />';
$("<td></td>").append($deleteButton).insertAfter("#cart tbody td:nth-child(2)");
$("img.clickable").click(function(){
	$(this).parents("tr").hide().find(".quantity").children("input").val(0).trigger("change");
});
$("<td>&nbsp;</td>").insertAfter("#cart tfoot td:nth-child(2)");

 

常用正则表达式大全

常用正则表达式大全!(例如:匹配中文、匹配html)

匹配中文字符的正则表达式: [u4e00-u9fa5]   

评注:匹配中文还真是个头疼的事,有了这个表达式就好办了

  

匹配双字节字符(包括汉字在内):[^x00-xff]   

评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)

   

匹配空白行的正则表达式:ns*r   

评注:可以用来删除空白行   

 

匹配HTML标记的正则表达式:<(S* )[^>]*>.* |<.*  />   

评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力   

 

匹配首尾空白字符的正则表达式:^s*|s*$   

评注:可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式   

 

匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*   

评注:表单验证时很实用   

 

匹配网址URL的正则表达式:[a-zA-z]+://[^s]*   

评注:网上流传的版本功能很有限,上面这个基本可以满足需求   

 

匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$   

评注:表单验证时很实用   

 

匹配国内电话号码:d{3}-d{8}|d{4}-d{7}   

评注:匹配形式如 0511-4405222 或 021-87888822   

 

匹配腾讯QQ号:[1-9][0-9]{4,}   

评注:腾讯QQ号从10000开始   

 

匹配中国邮政编码:[1-9]d{5}( !d)   

评注:中国邮政编码为6位数字   

 

匹配身份证:d{15}|d{18}   

评注:中国的身份证为15位或18位   

 

匹配ip地址:d+.d+.d+.d+   

评注:提取ip地址时有用   

 

匹配特定数字:   

^[1-9]d*$    //匹配正整数   

^-[1-9]d*$   //匹配负整数   

^- [1-9]d*$   //匹配整数   

^[1-9]d*|0$  //匹配非负整数(正整数 + 0)   

^-[1-9]d*|0$   //匹配非正整数(负整数 + 0)   

^[1-9]d*.d*|0.d*[1-9]d*$   //匹配正浮点数   

^-([1-9]d*.d*|0.d*[1-9]d*)$  //匹配负浮点数   

^- ([1-9]d*.d*|0.d*[1-9]d*|0 .0+|0)$  //匹配浮点数   

^[1-9]d*.d*|0.d*[1-9]d*|0 .0+|0$   //匹配非负浮点数(正浮点数 + 0)   

^(-([1-9]d*.d*|0.d*[1-9]d*))|0 .0+|0$  //匹配非正浮点数(负浮点数 + 0)   

评注:处理大量数据时有用,具体应用时注意修正   

 

匹配特定字符串:   

^[A-Za-z]+$  //匹配由26个英文字母组成的字符串   

^[A-Z]+$  //匹配由26个英文字母的大写组成的字符串   

^[a-z]+$  //匹配由26个英文字母的小写组成的字符串   

^[A-Za-z0-9]+$  //匹配由数字和26个英文字母组成的字符串   

^w+$  //匹配由数字、26个英文字母或者下划线组成的字符串   

 

在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:   

只能输入数字:“^[0-9]*$”   

只能输入n位的数字:“^d{n}$”   

只能输入至少n位数字:“^d{n,}$”   

只能输入m-n位的数字:“^d{m,n}$”   

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

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

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

只能输入非零的正整数:“^+ [1-9][0-9]*$”   

只能输入非零的负整数:“^-[1-9][0-9]*$”   

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

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

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

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

只能输入由数字和26个英文字母组成的字符串:“^[A-Za-z0-9]+$”   

只能输入由数字、26个英文字母或者下划线组成的字符串:“^w+$”   

 

验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为:以字母开头,长度在6-18之间,只能包含字符、数字和下划线。   

 

验证是否含有^%&”,;= $”等字符:“[^%&”,;= $x22]+”   只能输入汉字:“^[u4e00-u9fa5],{0,}$”   

 

验证Email地址:“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”   

 

验证InternetURL:“^http://([w-]+.)+[w-]+(/[w-./ %&=]*) $”   

 

验证电话号码:“^((d{3,4})|d{3,4}-) d{7,8}$”   

正确格式为:“XXXX-XXXXXXX”,“XXXX-XXXXXXXX”,“XXX-XXXXXXX”,   “XXX-XXXXXXXX”,“XXXXXXX”,“XXXXXXXX”。   

 

验证身份证号(15位或18位数字):“^d{15}|d{}18$”   

 

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

验证一个月的31天:“^((0 [1-9])|((1|2)[0-9])|30|31)$”   正确格式为:“01”“09”和“1”“31”。   

 

匹配中文字符的正则表达式: [u4e00-u9fa5]   

匹配双字节字符(包括汉字在内):[^x00-xff]   

匹配空行的正则表达式:n[s| ]*r   

匹配HTML标记的正则表达式:/<(.*)>.*|<(.*) />/   

匹配首尾空格的正则表达式:(^s*)|(s*$)   

匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*   

 

匹配网址URL的正则表达式:http://([w-]+.)+[w-]+(/[w- ./ %&=]*)    

 

(1)应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)   

String.prototype.len=function(){return this.replace([^x00-xff]/g,”aa”).length;}   

 

(2)应用:javascript中没有像vbscript那样的trim函数,我们就可以利用这个表达式来实现   

String.prototype.trim = function()   {   

return this.replace(/(^s*)|(s*$)/g, “”);   

}   

 

(3)应用:利用正则表达式分解和转换IP地址   

function IP2V(ip) //IP地址转换成对应数值   {   

re=/(d+).(d+).(d+).(d+)/g //匹配IP地址的正则表达式   

if(re.test(ip))   {   

return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1   

}   else   {   

throw new Error(“Not a valid IP address!”)   

}   }   

 

(4)应用:从URL地址中提取文件名的javascript程序   

s=”http://www.9499.net/page1.htm”;   

s=s.replace(/(.*/){0,}([^.]+).*/ig,”$2″) ;//Page1.htm   

 

(5)应用:利用正则表达式限制网页表单里的文本框输入内容   

用正则表达式限制只能输入中文:

onkeyup=”value=value.replace(/[^u4E00-u9FA5]/g,”) “onbeforepaste=”clipboardData.setData(”text”,clipboardData.getData(”text”).replace(/[^u4E00-u9FA5]/g,”))”   

用正则表达式限制只能输入全角字符:

onkeyup=”value=value.replace(/[^uFF00-uFFFF]/g,”) “onbeforepaste=”clipboardData.setData(”text”,clipboardData.getData(”text”).replace(/[^uFF00-uFFFF]/g,”))”   

用正则表达式限制只能输入数字:onkeyup=”value=value.replace(/[^d]/g,”) “onbeforepaste= “clipboardData.setData(”text”,clipboardData.getData(”text”).replace(/[^d]/g,”))”   

用正则表达式限制只能输入数字和英文:

onkeyup=”value=value.replace(/[W]/g,”) “onbeforepaste=”clipboardData.setData(”text”,clipboardData.getData(”text”).replace(/[^d]/g,”

javascript正则表达式的基础知识

                                           javascript正则表达式的基础知识
1.javascript 正则对象创建 和 用法
    声明javascript 正则表达式
     var reCat = new RegExp(“cat”);
      你也可以 
     var reCat = /cat/;      //Perl 风格   (推荐)

2.学习最常用的 test exec match search  replace  split 6个方法
   1) test  检查指定的字符串是否存在
       var data = “123123”;
       var reCat = /123/gi;
       alert(reCat.test(data));  //true
       //检查字符是否存在  g 继续往下走  i 不区分大小写
   2) exec 返回查询值
       var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
       var reCat = /cat/i;
       alert(reCat.exec(data));  //Cat
   3)match  得到查询数组
       var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
       var reCat = /cat/gi;
       var arrMactches = data.match(reCat)
       for (var i=0;i < arrMactches.length ; i++)
       {
            alert(arrMactches[i]);   //Cat  cat
       }
     4) search  返回搜索位置  类似于indexof
       var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
       var reCat = /cat/gi;
       alert(data.search(reCat));  //23
    5) replace  替换字符  利用正则替换
       var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
       var reCat = /cat/gi;
       alert(data.replace(reCat,”libinqq”));  //123123,213,12312,312,3,libinqq,libinqq,dsfsdfs,
    6)split   利用正则分割数组
       var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
       var reCat = /\,/;
       var arrdata = data.split(reCat);
       for (var i = 0; i < arrdata.length; i++)
       {
            alert(arrdata[i]);//注意最后还有一个空字符串
       }
 

3.学习下  简单类   负向类  范围类  组合类
       //简单类
       var data = “1libinqq,2libinqq,3libinqq,4libinqq”;
       var reCat = /[123]libinqq/gi;
       var arrdata = data.match(reCat);
       for (var i = 0; i < arrdata.length; i++)
       {
            alert(arrdata[i]);  // 1libinqq 2libinqq  3libinqq
       }

       //负向类
       var data = “alibinqq,1libinqq,2libinqq,3libinqq,4libinqq”;

       var reCat = /[^a123]libinqq/gi;
       var arrdata = data.match(reCat);
       for (var i = 0; i < arrdata.length; i++)
       {
            alert(arrdata[i]);  //4libinqq
       }

       //范围类
       var data = “libinqq1,libinqq2,libinqq3,libinqq4,libinqq5”;

       var reCat = /libinqq[2-3]/gi;
       var arrdata = data.match(reCat);
       for (var i = 0; i < arrdata.length; i++)
       {
            alert(arrdata[i]);   // libinqq2  libinqq3
       }

       //组合类
      var data = “a,b,c,w,1,2,3,5”;
      var reCat = /[a-q1-4\n]/gi;
      var arrdata = data.match(reCat);
      for (var i = 0; i < arrdata.length; i++)
      {
           alert(arrdata[i]);  // a b c 1 2 3
      }


4.应用实例

     var str = “abc*123”;
     var str2 = “abc-123”;
     var str3 = “abc123”;
     var reg = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/; //数字、字母、中文
     var reg2 = /[^\a-\z\A-\Z0-9\-\u4E00-\u9FA5]/; //数字、字母、中文、-
     if(str != “” && null != str.match(reg)){
           alert(“str只能是字母、数字、中文!”);    //弹出此提示
     }
     if(str2 != “” && null != str2.match(reg)){
          alert(“str2只能是字母、数字、中文!”);    //弹出此提示
     }
     if(str3 != “” && null != str3.match(reg)){
          alert(“str3只能是字母、数字、中文!”);
     }

     if(str != “” && null != str.match(reg2)){
           alert(“str只能是字母、数字、中文、中划线!”);    //弹出此提示
     }
     if(str2 != “” && null != str2.match(reg2)){
           alert(“str2只能是字母、数字、中文、中划线!”);
     }
     if(str3 != “” && null != str3.match(reg2)){
           alert(“str3只能是字母、数字、中文、中划线!”);
     }

 

javascript学习笔记:正则表达式1

实际工作中最常用的都是一些简单的正则表达式,form验证里的邮件、中文、网址、电话等的匹配,开发中的注释匹配,这些都还好,偶尔错了多试几次就可以搞定了。

但是以下部分很少用到,今天看《javascript权威指南(第五版)》才详细了解了,算是正则表达式的进阶知识了。

正则表达式的锚字符(锚其实就是定位的意思,这个我在刚学html的时候一直没弄明白

  • ^ 匹配字符串的开头,在多行模式中匹配一行的开头
  • $ 匹配字符串的结尾,在多行模式中匹配一行的结尾
  • \b 匹配一个词语的边界,词语边界即是\w和\W之间的位置,或\w和字符串的开头和结尾的位置
  • \B 匹配非词语边界的位置。这个跟上面相反,即是\W和\W之间,\w和\w之间的位置这两种情形
  • ( =p) 正前向声明,要求接下来的字符都与模式p匹配,但是不包括匹配中的那些字符
  • ( !p) 反前向声明,要求接下来的字符与模式p匹配,
/\bhello/.test("ahello world");//false
/\bhello/.test("hello world");//true
/hello\b/.test(" hello world");//true
/hello\b/.test("hello@ world");//true @是非单词字符,所以o和@之间即是边界,也就是\b
/hello\b/.test("hello_ world");//false,该正则表达式要求hello之后有一个非单词字符(0-9,a-z,A~Z和_),但"hello_ world"中_是单词字符,所以返回false
/hello\B/.test(" hello_world");//true \B的含义与\b相反,参考上面解释,o和_之间为非词语边界
/hello\B/.test(" helloworld");//true,参考上面解释,o和w之间为非词语边界,\w和\w之间的位置
/hello\B/.test(" helloworld");//true,参考上面解释,\W和\W之间
/@\B/.test("@#");//true \W \W

正则表达式的标志(这个其实是高级匹配了)

  • i 执行不区分大小写的匹配
  • g 执行一个全局匹配,即找到所有匹配的字符串
  • m 多行模式,^匹配一行的开头和字符串的开头,$匹配一行的结尾和字符串的结尾
"javaScript is a script language".replace(/script/ig,"")//"java is a  language"
"javaScript is a script language".replace(/script/g,"")//javaScript is a  language"
"javaScript is a script language".replace(/script/i,"")//java is a script language"

—-未完待续