仅在不使用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的浏览器,获得相同限制的最佳方法是什么?

零298

然后,您将需要使用JavaScript来检查输入。在您的<form>标记中,该onsubmit属性需要调用一个将返回boolean的函数True表示表单将通过,false表示将不通过。

使用文档选择器获取input元素,然后检查其value属性。确保长度正确。然后将其与正则表达式匹配。(在此处了解它们:正则表达式)如果一切正常,请返回true。否则返回false,或者在控制台中打印出什么错误或将其写入<div>如果您希望像使用HTML5方式那样弹出窗口,则必须做一些其他事情。

请注意,return validate();如果您不将其包括在内,onsubmit=那么它将不起作用,那么您必须具有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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在不使用单例的情况下将类限制为一个实例?

来自分类Dev

在不使用单例的情况下将类限制为一个实例?

来自分类Dev

在不使用脚本的情况下,仅在输入文本框中接受数字

来自分类Dev

使用AngularJS将输入限制为数字输入字段

来自分类Dev

使用AngularJS将输入限制为数字输入字段

来自分类Dev

如何在不使用计算的 observables 的情况下将 observable 数组上的 Knockout foreach 一次限制为 5 个?

来自分类Dev

如何在不使用 Bootstrap 的情况下使 HTML 表单输入字段具有响应性

来自分类Dev

HTML5:在不使用JavaScript的情况下使整个表格行都可点击

来自分类Dev

在不干扰光标位置的情况下将 TextBox 输入限制为特定值

来自分类Dev

如何使用HTML 5(最好)或javascript(无jquery)将文本输入限制为仅接受字母M和F

来自分类Dev

在不使用安全组的情况下将EC2应用程序限制为访问我们开发人员的IP

来自分类Dev

如何将用户的输入限制为仅在 C++ 中输入数字和字母

来自分类Dev

如何在HTML5中不使用对等连接的情况下实现多方音频会议系统?

来自分类Dev

将 HTML 输入限制为仅数字,最大长度为 5(忽略其他字符)

来自分类Dev

如何在不使用表单的情况下将文本字段数据从html传递到servlet

来自分类Dev

.NET RegEx可以在不使用.ToUpper()的情况下将字母大写吗?

来自分类Dev

将HTML输入限制为固定长度的数字

来自分类Dev

在Angular2 / Typescript中不使用ngModel的情况下访问输入字段的值

来自分类Dev

在不使用网格系统的情况下,组合输入字段上的引导程序集宽度

来自分类Dev

如何在不使用状态的情况下清除功能组件中输入字段的值?

来自分类Dev

如何仅在生产中限制网站使用SSL,但在本地不使用SSL的情况下继续工作

来自分类Dev

如何使用javascript将html上的输入限制为带小数的数字?

来自分类Dev

在不改变 HTML 的情况下,使用 CSS 或 JavaScript 将字段输入到下一行

来自分类Dev

如何在不使用乘法(*)符号的情况下将十进制数字相乘

来自分类Dev

在不使用+的情况下将两个数字相加的实现逻辑?

来自分类Dev

如何在不使用乘法(*)符号的情况下将十进制数字相乘

来自分类Dev

在不使用隐藏字段的情况下将current_user传递给表单(规则4)

来自分类Dev

在不使用Ctrl + Enter的情况下将值输入多个单元格

来自分类Dev

如何在不使用协议的情况下将jQuery验证用于输入类型的url?

Related 相关文章

  1. 1

    在不使用单例的情况下将类限制为一个实例?

  2. 2

    在不使用单例的情况下将类限制为一个实例?

  3. 3

    在不使用脚本的情况下,仅在输入文本框中接受数字

  4. 4

    使用AngularJS将输入限制为数字输入字段

  5. 5

    使用AngularJS将输入限制为数字输入字段

  6. 6

    如何在不使用计算的 observables 的情况下将 observable 数组上的 Knockout foreach 一次限制为 5 个?

  7. 7

    如何在不使用 Bootstrap 的情况下使 HTML 表单输入字段具有响应性

  8. 8

    HTML5:在不使用JavaScript的情况下使整个表格行都可点击

  9. 9

    在不干扰光标位置的情况下将 TextBox 输入限制为特定值

  10. 10

    如何使用HTML 5(最好)或javascript(无jquery)将文本输入限制为仅接受字母M和F

  11. 11

    在不使用安全组的情况下将EC2应用程序限制为访问我们开发人员的IP

  12. 12

    如何将用户的输入限制为仅在 C++ 中输入数字和字母

  13. 13

    如何在HTML5中不使用对等连接的情况下实现多方音频会议系统?

  14. 14

    将 HTML 输入限制为仅数字,最大长度为 5(忽略其他字符)

  15. 15

    如何在不使用表单的情况下将文本字段数据从html传递到servlet

  16. 16

    .NET RegEx可以在不使用.ToUpper()的情况下将字母大写吗?

  17. 17

    将HTML输入限制为固定长度的数字

  18. 18

    在Angular2 / Typescript中不使用ngModel的情况下访问输入字段的值

  19. 19

    在不使用网格系统的情况下,组合输入字段上的引导程序集宽度

  20. 20

    如何在不使用状态的情况下清除功能组件中输入字段的值?

  21. 21

    如何仅在生产中限制网站使用SSL,但在本地不使用SSL的情况下继续工作

  22. 22

    如何使用javascript将html上的输入限制为带小数的数字?

  23. 23

    在不改变 HTML 的情况下,使用 CSS 或 JavaScript 将字段输入到下一行

  24. 24

    如何在不使用乘法(*)符号的情况下将十进制数字相乘

  25. 25

    在不使用+的情况下将两个数字相加的实现逻辑?

  26. 26

    如何在不使用乘法(*)符号的情况下将十进制数字相乘

  27. 27

    在不使用隐藏字段的情况下将current_user传递给表单(规则4)

  28. 28

    在不使用Ctrl + Enter的情况下将值输入多个单元格

  29. 29

    如何在不使用协议的情况下将jQuery验证用于输入类型的url?

热门标签

归档