Html<输入模式>使用JavaScript处理-超过时失败

Html <input pattern> handling with JavaScript - fails on exceed

本文关键字：过时 处理 失败 使用 lt 输入模式 gt Html JavaScript      更新时间：2023-09-26

我在处理HTML <input> pattern属性时遇到问题。我想根据图案的要求改变指示器的颜色。直到输入为3个字符长，它才会变为绿色，但当输入超过20个字符时，它不会再次变为红色。这是HTML代码：

<p>
    <canvas id="Circle6" width="30" height="30"></canvas>
    Imię
    <input type="text" pattern=".{3,20}" required title="3-20 characters required" id="FirstName" oninput="checkInput(id, name)" name="Circle6">
</p>

和Javascript函数：

    function checkInput(id, name) {
        var input = document.getElementById(id);
        isValid = input.value.search(new RegExp(input.getAttribute('pattern'))) >= 0;
        var c = document.getElementById(name);
        var ctx = c.getContext("2d");
        if (isValid)
            ctx.fillStyle = "green";
        else ctx.fillStyle = "red";
        ctx.fill();
    }

行CCD_ 3取自HTML5"的Javascript回退；图案"；<输入>

编辑：圆圈由在页面加载时绘制

function drawCicle(elementid) {
    var c = document.getElementById(elementid);
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(15, 15, 10, 0, 2 * Math.PI);
    ctx.stroke();
}

您应该使用.test而不是.search，因为只要您的输入超过3个字符，后者就会返回匹配项（换句话说，如果您的输入字符串超过20个字符，您仍然会返回一个数组（计算结果为true）。

此外，您必须将regex模式锚定到字符串的前^和后$，因此只需将前者前置，并将后者附加到模式属性值：new RegExp('^'+input.getAttribute('pattern')+'$')。

function checkInput(id, name) {
    var input = document.getElementById(id),
        re = new RegExp('^'+input.getAttribute('pattern')+'$'),
        c = document.getElementById(name),
        ctx = c.getContext("2d");
    if (re.test(input.value))
        ctx.fillStyle = "green";
    else ctx.fillStyle = "red";
    ctx.fill();
}

请在此处查看小提琴：http://jsfiddle.net/teddyrised/pmdye1y0/3/

相关文章：