更改輸入文本字段的顏色不起作用

Question

我不確定自己可能做錯了什么，但是為什么當我在網站https://regex101.com/#javascript上測試正則表達式/^[\\d{9}]*$/時，如果它正確匹配，為什么是否有數字，但是當我在JavaScript上應用RegEx時，它不能正常工作嗎？ 我的意思是，它只顯示紅色的數字或字符。 相反，綠色代表數字，紅色代表字符。 HTML：

<input type="text" name="age" id="msisdn" onKeyUp="checkKey()"> 

JavaScript：

function checkKey() {
    var msisdn = document.getElementById("msisdn");

    if (msisdn.value == /^[\d{9}]*$/) {
        msisdn.style.color = "#00b300";
    } else {
        msisdn.style.color = "#ff0000";
    }
}

提琴手代碼

Answer 1

if(msisdn.value == /^\\d{9}$/) {會將輸入值（ 字符串 ）與RegExp對象進行比較，后者將始終返回false 。

使用RegExp#test

if(/^\d{9}$/.test(msisdn.value)) {

更新小提琴

這是最短的等效代碼

msisdn.style.color = /^\d{9}$/.test(document.getElementById("msisdn").value)
    ? "#00b300"
    : "#f00";

小提琴

---

當不遵循正則表達式時，不需要僅使用JavaScript來更改文本的顏色即可，可以使用HTML和CSS。 HTML5 pattern屬性可以在<input>上使用，並且:valid和:invalid偽選擇器可以在CSS中使用。

 input:invalid { color: #f00; } input:valid { color: #00b300; } 

 <input type="text" id="msisdn" name="plaintext" pattern="\\d{9}">