驗證html顏色代碼JS

Question

我在查找驗證html顏色代碼的代碼。想檢查用戶是否輸入了有效的顏色代碼，你可以幫助嗎？

我知道我需要一個正則表達式的東西，但我無法理解一個想想正則表達式的東西：S

感謝

Answer 1

可以匹配十六進制顏色是這樣的：

if (/^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(str)) { 
    //Match 
} 

注意，這不會處理名稱或rgb(n, n, n)。

可以匹配rgb(x, y, z)顏色是這樣的：

if (/^rgb\s*(\s*[012]?[0-9]{1,2}\s*,\s*[012]?[0-9]{1,2}\s*,\s*[012]?[0-9]{1,2}\s*)$/i.test(str)) { 
    //Match 
} 

注意，這將匹配rgb(299, 299, 299)。

Answer 2

你可以創建一個抽象元素，嘗試將顏色應用於該元素：

function validate_color(c) { 
    var litmus = 'red'; 
    var d = document.createElement('div'); 
    d.style.color=litmus; 
    d.style.color=c; 
    //Element's style.color will be reverted to litmus or set to '' if an invalid color is given 
    if(c !== litmus && (d.style.color === litmus || d.style.color === '')){ 
     return false; 
    } 
    return true; 
}