最近項(xiàng)目中需要開發(fā)一個(gè)顏色選擇控件，我做了一個(gè)支持選擇也支持手動(dòng)輸入的顏色選擇控件，支持手動(dòng)輸入必然要驗(yàn)證一下是否是正確的顏色格式，一開始
我通過
try {
document.getElementById(''ColorChooseControlText'').style.backgroundColor = document.getElementById(''ColorChooseControlText'').value;
args.IsValid = true;
} catch (err) {
args.IsValid = false;
}
這種方式去驗(yàn)證，異常了自然就不是正確的格式嘛，感覺挺好用
后來發(fā)現(xiàn)在谷歌瀏覽器行不通，谷歌瀏覽器不會(huì)異常，不是正確格式就處理為#FFFFFF
沒辦法，想到了正則表達(dá)式，學(xué)習(xí)了一下
寫了一個(gè)，支持#FFFFFF格式或者RGB（255,255,255）格式
function CheckIsColor(colorValue) {
var type = "^#[0-9a-fA-F]{6}{1}$" ;
var re = new RegExp(type);
if (colorValue.match(re) == null) {
type = "^[rR][gG][Bb][\(]((2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\)]{1}$";
re = new RegExp(type);
if (colorValue.match(re) == null) {
alert("no");
} else {
alert("yes");
}
} else {
alert("yes");
}
}
附上一個(gè)常用正則表達(dá)式字符的說明
表1.常用的元字符 |
代碼 | 說明 |
. | 匹配除換行符以外的任意字符 |
\w | 匹配字母或數(shù)字或下劃線或漢字 |
\s | 匹配任意的空白符 |
\d | 匹配數(shù)字 |
\b | 匹配單詞的開始或結(jié)束 |
^ | 匹配字符串的開始 |
$ | 匹配字符串的結(jié)束 |
表2.常用的限定符 |
代碼/語法 | 說明 |
* | 重復(fù)零次或更多次 |
+ | 重復(fù)一次或更多次 |
? | 重復(fù)零次或一次 |
{n} | 重復(fù)n次 |
{n,} | 重復(fù)n次或更多次 |
{n,m} | 重復(fù)n到m次 |
表3.常用的反義代碼 |
代碼/語法 | 說明 |
\W | 匹配任意不是字母，數(shù)字，下劃線，漢字的字符 |
\S | 匹配任意不是空白符的字符 |
\D | 匹配任意非數(shù)字的字符 |
\B | 匹配不是單詞開頭或結(jié)束的位置 |
[^x] | 匹配除了x以外的任意字符 |
[^aeiou] | 匹配除了aeiou這幾個(gè)字母以外的任意字符 |
表4.分組語法 |
捕獲 |
(exp) | 匹配exp,并捕獲文本到自動(dòng)命名的組里 |
(?<name>exp) | 匹配exp,并捕獲文本到名稱為name的組里，也可以寫成(?''name''exp) |
(?:exp) | 匹配exp,不捕獲匹配的文本，也不給此分組分配組號(hào) |
零寬斷言 |
(?=exp) | 匹配exp前面的位置 |
(?<=exp) | 匹配exp后面的位置 |
(?!exp) | 匹配后面跟的不是exp的位置 |
(?<!exp) | 匹配前面不是exp的位置 |
注釋 |
(?#comment) | 這種類型的組不對(duì)正則表達(dá)式的處理產(chǎn)生任何影響，用于提供注釋讓人閱讀 |
表5.懶惰限定符 |
*? | 重復(fù)任意次，但盡可能少重復(fù) |
+? | 重復(fù)1次或更多次，但盡可能少重復(fù) |
?? | 重復(fù)0次或1次，但盡可能少重復(fù) |
{n,m}? | 重復(fù)n到m次，但盡可能少重復(fù) |
{n,}? | 重復(fù)n次以上，但盡可能少重復(fù) |
表6.常用的處理選項(xiàng) |
名稱 | 說明 |
IgnoreCase(忽略大小寫) | 匹配時(shí)不區(qū)分大小寫。 |
Multiline(多行模式) | 更改^和$的含義，使它們分別在任意一行的行首和行尾匹配，而不僅僅在整個(gè)字符串的開頭和結(jié)尾匹配。(在此模式下,$的精確含意是:匹配\n之前的位置以及字符串結(jié)束前的位置.) |
Singleline(單行模式) | 更改.的含義，使它與每一個(gè)字符匹配（包括換行符\n）。 |
IgnorePatternWhitespace(忽略空白) | 忽略表達(dá)式中的非轉(zhuǎn)義空白并啟用由#標(biāo)記的注釋。 |
RightToLeft(從右向左查找) | 匹配從右向左而不是從左向右進(jìn)行。 |
ExplicitCapture(顯式捕獲) | 僅捕獲已被顯式命名的組。 |
ECMAScript(JavaScript兼容模式) | 使表達(dá)式的行為與它在JavaScript里的行為一致。 |
表7.尚未詳細(xì)討論的語法 |
\a | 報(bào)警字符(打印它的效果是電腦嘀一聲) |
\b | 通常是單詞分界位置，但如果在字符類里使用代表退格 |
\t | 制表符，Tab |
\r | 回車 |
\v | 豎向制表符 |
\f | 換頁(yè)符 |
\n | 換行符 |
\e | Escape |
\0nn | ASCII代碼中八進(jìn)制代碼為nn的字符 |
\xnn | ASCII代碼中十六進(jìn)制代碼為nn的字符 |
\unnnn | Unicode代碼中十六進(jìn)制代碼為nnnn的字符 |
\cN | ASCII控制字符。比如\cC代表Ctrl+C |
\A | 字符串開頭(類似^，但不受處理多行選項(xiàng)的影響) |
\Z | 字符串結(jié)尾或行尾(不受處理多行選項(xiàng)的影響) |
\z | 字符串結(jié)尾(類似$，但不受處理多行選項(xiàng)的影響) |
\G | 當(dāng)前搜索的開頭 |
\p{name} | Unicode中命名為name的字符類，例如\p{IsGreek} |
(?>exp) | 貪婪子表達(dá)式 |
(?<x>-<y>exp) | 平衡組 |
(?im-nsx:exp) | 在子表達(dá)式exp中改變處理選項(xiàng) |
(?im-nsx) | 為表達(dá)式后面的部分改變處理選項(xiàng) |
(?(exp)yes|no) | 把exp當(dāng)作零寬正向先行斷言，如果在這個(gè)位置能匹配，使用yes作為此組的表達(dá)式；否則使用no |
(?(exp)yes) | 同上，只是使用空表達(dá)式作為no |
(?(name)yes|no) | 如果命名為name的組捕獲到了內(nèi)容，使用yes作為表達(dá)式；否則使用no |
(?(name)yes) | 同上，只是使用空表達(dá)式作為no |
最后給大家一個(gè)學(xué)習(xí)文檔吧，我就看的這個(gè)東東。。
該文章在 2020/3/3 2:12:30 編輯過
400 186 1886
