Forms 引导表单模式强制验证_Forms_Validation_Bootstrap 4

Forms 引导表单模式强制验证

forms validation bootstrap-4

Forms 引导表单模式强制验证,forms,validation,bootstrap-4,Forms,Validation,Bootstrap 4,在Bootstrap中，我想为地址创建一个带有强制验证模式的表单，其中值必须为： “自由输入文本”+“5个数字字符”（必填）示例：罗马-65498 如何做到这一点？演示：代码： <html lang="en"> <head> <title>Title</title>  <meta charset="utf-8"> <meta na

在Bootstrap中，我想为地址创建一个带有强制验证模式的表单，其中值必须为：

“自由输入文本”+“5个数字字符”（必填）

示例：
罗马-65498

如何做到这一点？

演示：

代码：

 <html lang="en">
 <head>
   <title>Title</title>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 </head>
 <body>

        <form class="p-5" action="POST">
            <label for="zip_code">Optional Spaces:</label>
            <input type="tel" id="zip_code" name="zip_code" pattern="([A-Za-z]{4,60} ?- ?\d{5})?" title="Zip code"><br><br>
            <label for="zip_code">Required Spaces:</label>
            <input type="tel" id="zip_code" name="zip_code" pattern="([A-Za-z]{4,60} - \d{5})?" title="Zip code"><br><br>
            <input type="submit">
        </form>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>


标题
可选空间：



所需空间：

这里有一个关于匹配html输入属性的模式的有用链接：
您是否可以要求用户输入一个3个字母的国家代码？如果是这样的话，我有一个解决方案，一次输入只允许3个字母，一个破折号，然后是5个数字（例如：usa-12345）。用户必须先插入一个文本（自由输入），然后在符号“-”后面的末尾，他必须插入5个数字。好的，你有自由输入文本的最小和最大长度吗？一般来说，您希望将用户限制在一定的长度范围内。对于自由输入文本，最短可以是4个字符，最长可以是60个字符。这是可行的！你能提供破折号前后的必填空格吗？例如，罗马-43523给你：如果你想让我编辑演示或上面粘贴的代码，请告诉我。为你编辑了演示和代码，很高兴我能帮你：）