Question

我很难验证必须包含特定字词的文字字段。例如，我输入了一个测试页面，要求用户输入'hello'，否则会有警报。

我尝试过使用indexOf，但在我的情况下无法正常工作。我可以问出了什么问题吗？有没有其他方法来验证这种情况？如果可能的话，我更愿意使用vanilla javascript。感谢。

<html>
    <head>
        <script type="text/javascript">
            function checkText()
            {
            var text1 = document.getElementById("intro").value;
            var text2 = 'hello';

            if(text1.indexOf(text2) > -1){
                alert("Say hello");
                return false;
            }else{
                alert("Okay!");
            }
        }
        </script>
    </head>
    <body>
        Introduce yourself <input type="text" name="intro" id="intro"> <input type="button" value="Click" onClick="checkText()">
    </body>
</html>

Answer 1

内联方法

您必须获取函数内部的值，因为在加载脚本时它将不可用。此外，如果您想在hello不存在时提醒Say hello，请更改条件以检查text1.indexOf(test2) == -1：

    var text2 = 'hello';

    function checkText()
    {
        var text1 = document.getElementById("intro").value;
        if(text1.indexOf(text2) == -1){
            alert("Say hello");
            return false;
        }else{
            alert("Hello " +text1);
        }
    }

JS小提琴： http://jsfiddle.net/J4eGw/

首选方法

另外需要注意的是，您应该避免在HTML中内联事件。您可以使用以下内容附加脚本中的事件。

<强> HTML

Introduce yourself <input type="text" name="intro" id="intro">
<input id="btnCheck" type="button" value="Click">

<强>的Javascript

 var text2 = 'hello';

addEvent(window, "load", function(){
   addEvent(document.getElementById("btnCheck"), "click", checkText);
});


function checkText()
{
    var text1 = document.getElementById("intro").value;
    alert((text1.toLowerCase().indexOf(text2) == -1) ? "Say hello":"Okay");
}

function addEvent(element, evnt, funct){
    if (element.attachEvent){
       //for early IE versions
       return element.attachEvent('on'+evnt, funct);
    }else{
       //for modern browsers
       return element.addEventListener(evnt, funct, false);
    }
}

JS小提琴： http://jsfiddle.net/J4eGw/2/

Answer 2

text1在您检查时未定义为最新值，因此您应该这样做：

var text2 ='hello';

        function checkText()
        {
            var text1 = document.getElementById("intro").value;//updates every time you check

            if(text1.indexOf(text2) > -1){
                alert("Say hello");
                return false;
            }else{
                alert("Hello " +text1);
             }
        }
    </script>
</head>
<body>
    Introduce yourself <input type="text" name="intro" id="intro"> <input type="button" value="Click" onClick="checkText()">
</body>

Answer 3

var text2 = 'hello';
function checkText(){
        text1 = document.getElementById("intro").value;
        if(text1.indexOf(text2) > -1){
            alert("Say hello");
            return false;
        } else {
        alert("Hello " +text1);
    }   
}
<

您需要确保每次点击都获得text1的新值，而不仅仅是在脚本加载时。

javascript：输入表单需要特定的单词

3 个答案:

内联方法

首选方法