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";
    }
}

Code on fiddler

Answer 1

if(msisdn.value == /^\d{9}$/) {会将输入值（ string ）与RegExp对象进行比较，后者将始终返回false。

使用RegExp#test

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

Updated Fiddle

这是最短的等效代码

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

Fiddle

当不遵循正则表达式，HTML和HTML时，不需要JavaScript来更改文本的颜色。可以使用CSS。 HTML5 pattern属性可用于<input>和:valid和:invalid伪选择器可用于CSS。

＆＃13;

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

＆＃13;

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

＆＃13;

更改输入文本字段的颜色不起作用

1 个答案: