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

Change color of input text field not working

本文关键字：颜色 工作 字段 输入 文本      更新时间：2023-09-26

我不确定我可能做错了什么，但为什么当我在网站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";
    }
}

fiddler上的代码

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

相关文章：