admin管理员组

文章数量:1335106

To restrict an input field to alphanumeric only, I use the following on my site:

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

However for browsers that don't support HTML5, what is the best way to get the same restrictions?

To restrict an input field to alphanumeric only, I use the following on my site:

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

However for browsers that don't support HTML5, what is the best way to get the same restrictions?

  • javascript
  • html
Share Improve this question edited Jan 13, 2014 at 21:01 zero298 26.9k10 gold badges79 silver badges107 bronze badges asked Jan 13, 2014 at 20:45 ryeryeryerye 1231 gold badge7 silver badges16 bronze badges 4
  • Try searching for jQuery plugins: google./search?q=jquery+input+mask+alphanumeric – Yuriy Galanter Commented Jan 13, 2014 at 20:47
  • You can use JavaScript right? – zero298 Commented Jan 13, 2014 at 21:01
  • 2 Just to be clear, you will have to use JavaScript and accept that having it disabled a user will not have this level of early error correction/prevention. This is actually part of why it was added to HTML5: to allow error checking without scripting. You will, naturally, still have to check on the server-side to ensure you have received sane data. – BrianH Commented Jan 13, 2014 at 21:04
  • javascriptools.sourceforge/samples/sample_mask.html – Igor Benikov Commented Jan 13, 2014 at 21:33
Add a ment  | 

1 Answer 1

Reset to default 3

You will need to use JavaScript to check the input then. In your <form> tag, the onsubmit attribute needs to call a function that will return a boolean value. True means that the form will go through, false, means that it won't.

Use a document selector to get the input element and then check its value attribute. Make sure it is the right length. Then match it against a regular expression. (Learn about them here: Regular Expressions) If everything thing is fine, return true. Otherwise return false and either print in the console what was wrong or write it to a <div>. If you want a pop-up like you get with the HTML5 way, you'll have to do some other magic.

Note the return validate(); If you don't include that in your onsubmit= then it won't work, you must have the return.

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

本文标签： javascriptRestrict input field to alphanumeric only without HTML5Stack Overflow

版权声明：本文标题：javascript - Restrict input field to alphanumeric only without HTML5 - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742372398a2462492.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。