Question

要将输入字段限制为仅限字母数字，我在我的网站上使用以下内容：

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

但是对于不支持HTML5的浏览器，获得相同限制的最佳方法是什么？

Answer 1

然后，您需要使用JavaScript来检查输入。在<form>标记中，onsubmit属性需要调用将返回boolean值的函数。 True意味着表单将通过，false，意味着它不会。

使用文档选择器获取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>

仅在没有HTML5的情况下将输入字段限制为字母数字

1 个答案: