限制輸入字段爲字符只是沒HTML5

要限制輸入字段只爲字符，我用我的網站如下：限制輸入字段爲字符只是沒HTML5

<input 
    type="text" 
    name="url_code" 
    pattern="[a-zA-Z0-9_-]{4,10}" 
    class="widefat-main" 
    title="4 to 10 alphanumerical characters only" 
    />

但是，對於不支持HTML5的瀏覽器，什麼是最好的方法獲得相同的限制？

來源

2014-01-13 ryerye

嘗試搜索jQuery插件：https://www.google.com/search?q=jquery+input+mask+alphanumeric –

您可以使用JavaScript嗎？ – zero298

要明確一點，您將不得不使用JavaScript並接受禁用用戶將不具備此級別的早期錯誤糾正/預防功能。這實際上是爲什麼它被添加到HTML5的一部分：允許在沒有腳本的情況下進行錯誤檢查。當然，您仍然需要在服務器端進行檢查，以確保您收到了正常的數據。 – BrianHall

您將需要使用JavaScript來檢查輸入即可。在<form>標記中，onsubmit屬性需要調用一個將返回boolean值的函數。真的意味着表格會通過，假的，意味着它不會。

使用文件選擇器來獲取input元素，然後檢查其屬性value。確保它是正確的長度。然後將其與正則表達式進行匹配。（在這裏瞭解它們：Regular Expressions）如果一切都很好，請返回true。否則返回false，並在控制檯中輸出錯誤信息或將其寫入<div>。如果你想用HTML5的方式獲得彈出式窗口，你必須做一些其他的魔術。

注意return validate();如果不包含在你的onsubmit=那麼它將無法工作，你必須有回報。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Validate</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width"> 
     <style> 
     .widefat-main{ 
     } 
     </style> 
     <script> 
     function validate() { 
      var errorDiv = document.getElementById("errorDiv"), 
        regex = /^[a-z0-9]+$/, 
        str = document.getElementById("inputString").value; 

      if ((str.length > 4) && (str.length < 10) && regex.test(str)) { 
       errorDiv.innerHTML = "Fine string"; 
       return true; 
      } 
      else { 
       errorDiv.innerHTML = "4 to 10 alphanumerical characters only"; 
       return false; 
      } 
     } 
     </script> 
    </head> 
    <body> 
     <form action="" onsubmit="return validate();"> 
     <input 
      id="inputString" 
      type="text" 
      name="url_code" 
      class="widefat-main" 
      title="4 to 10 alphanumerical characters only" 
      /> 
     <input type="submit" value="Submit"/> 
     </form> 
     <div id="errorDiv"></div> 
    </body> 
</html>

來源

2014-01-13 21:23:32 zero298

呵呵......有人給了這個東西，但沒有提出改進建議。太粗魯了。 – Katana314

限制輸入字段爲字符只是沒HTML5

回答

相關問題