限制输入字段为字符只是没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

回答

相关问题