無效字符輸入上的JavaScript返回錯誤消息

我想要一個文本框只接受字母字符，我相信這是用每個字符輸入後調用的當前函數完成的。但是，我也想在用戶嘗試輸入非字母字符的字符時返回錯誤消息。任何人都可以解釋這個問題的可能解決方案？無效字符輸入上的JavaScript返回錯誤消息

<!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>

來源

2014-11-15 Zack

務必要關閉你的'input'標籤。 – nothingisnecessary

使用此功能：

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 id="maiden" name="maiden" onkeyup="validateLetter();" />

變量爲textInput現在包含按鍵之後的輸入值。該函數然後檢查替換後字符串是否與原始輸入相同。

來源

2014-11-15 17:46:54

假設字母字符[A-Za-z]您可以使用正則表達式test功能檢查，如果輸入作爲唯一字母字符

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

這個正則表達式返回true時，從一開始就^到結束的textInput$你只有[a-zA-Z]集中的字符（包含空字符串）。

如果要包括白色空間設定：

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

應用到你的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; 
}

來源

2014-11-15 17:47:12 dreyescat

下面是一個簡單的，天真的解決方案，爲en-us至少工作。它使用char代碼值而不是正則表達式來僅允許用戶輸入控制字符（如shift,alt等），並且只允許按字母字符。如果按下無效字符，它會顯示錯誤消息。

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

工作SO例子和源代碼如下：

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();

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

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

 
</p>

來源

2014-11-15 17:54:23 nothingisnecessary

無效字符輸入上的JavaScript返回錯誤消息

回答

相關問題