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