如何验证我的输入字段以请求输入一些文本？

如何解决如何验证我的输入字段以请求输入一些文本？

我只是在做反向单词挑战。我有代码，并且一切正常，我只需要创建一个验证，要求用户输入某种类型的文本。目前，如果您单击“提交”，但该字段中没有任何文本，它仍然会返回这是一个回文。不知道在其中添加什么以请求一些文本或告诉用户他们需要输入文本。

document.getElementById("flipBtn").addEventListener("click",function () {

    //Here is what happens when the button is clicked.

    // Step 1 - Get the Data
    let inputWord = document.getElementById("reverseString").value;

    // Step 2 - Work with the Data
    let lowerInput = inputWord.toLowerCase();
    lowerInput = lowerInput.replace(" ","");
    let reverseWord = ""

    //First is the Loop Variable followed by a ;.
    //Second part is how many times we are looping. Until the second part is false.
    //Third is what happens after each loop. ++ means add 1,-- = subtract 1.
    //[] indicates array position.
    //A string is an array of characters.
    //string word = [w][o][r][d]
    //               0  1  2  3
    //Without the - 1 you get index out of range exception.
    //Maybe there is a JavaScript method to make all the letters LowerCase.
    //Maybe you want to store four variables,the original input,that reversed,and the lowercase version of each for comparison.
    for (let loop = inputWord.length - 1; loop >= 0; loop--) {
        reverseWord += lowerInput.charAt(loop);

    };
    let otherReverse = lowerInput.split("").reverse().join("");


    // Step 3 - Output the result
    if (lowerInput == reverseWord) {
        document.getElementById("reverseOutput").innerHTML = `The word that you entered: ${reverseWord} was changed to: ${otherReverse} is a Palindrome`;
    }
    else {
        document.getElementById("reverseOutput").innerHTML = `The word that you entered: ${reverseWord} was changed to: ${otherReverse} is not a Palindrome`;
    }

    document.getElementById("reverseString").addEventListener("keydown",function (e) {

        var character = (e.which) ? e.which : e.keyCode;

        if (character >= 97 && character <= 122 ||
            character >= 65 && character <= 90 || character == 8 || character == 9 || character == 32) {
            return true;
        }
        else {

            e.preventDefault();
            return false;
        }

    });
})

    <div class="container">
        <div class="row card"><span class="custfont">Reverse A String</span>
                <br />
                <div class="col"><input class="input" type="text" id="reverseString" placeholder="Enter your text..." /></div>
                <br />
                <div class="col"><button class="btn custbtn btn-dark button" id="flipBtn">Flip the String</button></div>
                <br />
                <div class="col"><span id="reverseOutput"></span></div>
        </div>
    </div>

解决方法

如果我确切地得到了您想要的东西，它可能会为您提供帮助：

刚刚添加

if (inputWord.trim().length === 0) {
    return false;
}

检查输入长度。

document.getElementById("flipBtn").addEventListener("click",function () {

    //Here is what happens when the button is clicked.

    // Step 1 - Get the Data
    let inputWord = document.getElementById("reverseString").value;

    // Step 2 - Work with the Data
    let lowerInput = inputWord.toLowerCase();
    lowerInput = lowerInput.replace(" ","");
    let reverseWord = ""

    //First is the Loop Variable followed by a ;.
    //Second part is how many times we are looping. Until the second part is false.
    //Third is what happens after each loop. ++ means add 1,-- = subtract 1.
    //[] indicates array position.
    //A string is an array of characters.
    //string word = [w][o][r][d]
    //               0  1  2  3
    //Without the - 1 you get index out of range exception.
    //Maybe there is a JavaScript method to make all the letters LowerCase.
    //Maybe you want to store four variables,the original input,that reversed,and the lowercase version of each for comparison.
    for (let loop = inputWord.length - 1; loop >= 0; loop--) {
        reverseWord += lowerInput.charAt(loop);

    };
    let otherReverse = lowerInput.split("").reverse().join("");


    // Step 3 - Output the result
    if (lowerInput == reverseWord) {
        document.getElementById("reverseOutput").innerHTML = `The word that you entered: ${reverseWord} was changed to: ${otherReverse} is a Palindrome`;
    }
    else {
        document.getElementById("reverseOutput").innerHTML = `The word that you entered: ${reverseWord} was changed to: ${otherReverse} is not a Palindrome`;
    }

})

document.getElementById("reverseString").addEventListener("keyup",function (e) {
  if ( document.getElementById("reverseString").value.length > 0 ) {
    document.getElementById("flipBtn").disabled = false;
  } else {
    document.getElementById("flipBtn").disabled = true;
  }
}); 

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="container">
    <div class="row card"><span class="custfont">Reverse A String</span>
            <br />
            <div class="col"><input required class="input" type="text" id="reverseString" placeholder="Enter your text..." /></div>
            <br />
            <div class="col"><button class="btn custbtn btn-dark button" disabled id="flipBtn">Flip the String</button></div>
            <br />
            <div class="col"><span id="reverseOutput"></span></div>
    </div>
</div>

,

有两种解决方法。

您可以禁用按钮以防止用户提交按钮。输入标记具有disabled属性，可以设置该属性以防止用户提交表单。您可以在每个keyUp上运行一个函数，以检查输入的长度，如果为空，请将提交按钮设置为禁用。

<div class="col"><input class="input" onkeyup="validate()" type="text" id="reverseString" placeholder="Enter your text..." /></div>

function validate() {
const input = document.getElementById("reverseString").value;

     if(input.trim() === "") { 
            document.getElementById('flipBtn').disabled = true; 
        } else { 
            document.getElementById('flipBtn').disabled = false;
        }
    }
}

这是一种用户友好的解决方案，因为它暗示需要输入，并且阻止用户提交空白或空白输入。

您还可以在主提交功能中包含一个检查器，如果输入为空，则可以阻止该功能的其余部分运行。

document.getElementById("flipBtn").addEventListener("click",function () {
    let inputWord = document.getElementById("reverseString").value;
    if(!inputWord.trim()){
      return;
    }
    //...rest of logic
})

这也是有效的解决方案，建议同时使用。