Question

我想要一个文本框只接受字母字符，我相信这是用我在每个字符输入后调用的当前函数完成的。但是，当用户尝试输入不是字母字符的字符时，我还想返回错误消息。任何人都可以解释这个问题的可能解决方案吗？

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript">
    /* <![CDATA[ */
    function validateLetter() {
        var textInput = document.getElementById("maiden").value;
        textInput = textInput.replace(/[^A-Za-z]/g, "");
        document.getElementById("maiden").value = textInput;
      }
      /* ]] */
  </script>
</head>

  <body>
    <form action="validateThePassword" enctype="application/x-www-form-urlencoded">
      <p>Enter mother's maiden name:
        <input type="text" id="maiden" name="maiden" onkeypress="validateLetter()" </p>
    </form>
  </body>

</html>

Answer 1

使用此功能：

    function validateLetter() {
        var textInput = document.getElementById("maiden").value;
        var replacedInput = textInput.replace(/[^A-Za-z]/g, "");
        if(textInput != replacedInput)
            alert("Error message");

        document.getElementById("maiden").value = replacedInput;
  }

并将input元素更改为：

<input id="maiden" name="maiden" onkeyup="validateLetter();" />

变量textInput现在包含按键后的输入值。然后，该函数检查替换后的字符串是否与原始输入相同。

Answer 2

假设字母字符为[A-Za-z]，您可以使用RegExp test函数检查输入是否只是字母字符

/^[a-zA-Z]*$/.test(textInput)

从^开始$到textInput的结尾[a-zA-Z]时，此正则表达式返回true，您只有/^[a-zA-Z ]*$/.test(textInput)集中的字符（包括空字符串）。< / p>

如果要在设置中包含空格：

validateLetter

已应用于您的function validateLetter() { var textInput = document.getElementById("maiden").value; if (!/^[a-zA-Z ]*$/.test(textInput)) { // Return error message. } textInput = textInput.replace(/[^A-Za-z]/g, ""); document.getElementById("maiden").value = textInput; }功能：

{{1}}

Answer 3

这是一个简单，天真的解决方案，至少适用于en-us。它使用char代码值而不是regex来仅允许用户键入控制字符（如shift，alt等），并且只允许按字母字符。如果按下无效的char，它会显示一条错误消息。

JS小提琴链接：http://jsfiddle.net/297uvnx2/

使用SO示例和源代码如下：

＆＃13;

var utils = {
    validateLetter: function (event) {
        var c0 = 48;
        var cA = 65;
        var cZ = 90;
        var feedback = document.getElementById('feedback');
        var key = event.keyCode || event.which;
        if (key > cZ || (key < cA && key >= c0)) {
            feedback.innerHTML = "That character is not allowed."
            feedback.style.display = "block";
            return false;
        } else {
            feedback.style.display = "none";
        }
    }
};
var txtMaiden = document.getElementById('maiden');
txtMaiden.onkeydown = utils.validateLetter;
txtMaiden.focus();

＆＃13;

.error {
    display:none;
    margin: 2px;
    padding: 4px 8px;
    border: 1px solid red;
    background-color: rgb(255, 245, 245);
    color: #000;
}

＆＃13;

<p>Mother's maiden name:
    <br/>
    <input type="text" id="maiden" name="maiden" /><span id="feedback" class="error"></span>

</p>

＆＃13;

无效字符输入时JavaScript返回错误消息

3 个答案: