代码不使用模式属性 HTML 检查长度答案

【问题标题】：Code not checking length using pattern attribute HTML代码不使用模式属性 HTML 检查长度
【发布时间】：2017-10-19 12:47:24
【问题描述】：

试图让程序要求最小长度为 8，最大长度为 30，但它不起作用，有人能引导我走向正确的方向吗？谢谢！ （第 9 行）

 <?php ob_start( ); ?>
    <html>
        <head>
            <title>Teacher Registeration</title>
        </head>
        <body>
            <form method='POST'  action='TeacherRegisterCheck.php'>
            Email:<input type="email" id= "Email" name="teacherEmail" required /><br><br>
            Password:<input type="password" pattern=".{8,30}" id= "Password" name="teacherPassword" required title=" 8 to 30 characters" /><br><br>
            First Name:<input type="text" id= "First_Name" name="teacherfName" required /><br><br>
            Last Name:<input type="text" id= "Last_Name" name="teacherlName" required /><br><br>
            <label for="Title"> Title: </label> <select name="Title">
                <option selected="" value= "Default"> (Select A Title) </option>
                <option value= "Mr">Mr.</option>
                <option value= "Mrs">Mrs.</option>
                <option value= "Miss">Miss.</option>
                <option value= "Ms">Ms.</option>            
                <option value= "Dr">Dr.</option>
                <option value= "Master">Master.</option> </select> </br></br>           
             <button type="submit"> Enter </button>
            </form>
        </body>
    </html>
    <?php

【问题讨论】：

您看到的行为是什么？您使用的是什么浏览器和版本？
适用于 FireFox 57。可能是特定于浏览器的。 jsbin.com/pupuxoqome/edit?html,console,output
它不检查只是转到下一个 php 文件，我使用的是 Google Chrome 61.0.3163.100
也可以在 Chrome 中使用。 ibb.co/b2yxam你的问题可能在别处。
这应该适用于该浏览器版本。这是一个演示它的小提琴：jsfiddle.net/xdwdk6d0 我猜问题出在粘贴在这里的代码之外。是不是有一些 JS 影响了这个表单？

标签： html xampp

【解决方案1】：

我遇到了这个问题，您不能使用pattern，因为在某些iOS safari 和Android browsers 上还没有完全的跨浏览器支持可能无法工作。我试图找到一种解决方法，但最终我发现最安全的解决方案是通过Javascript 在客户端进行检查，当然还有通过PHP 在服务器端进行检查。

【讨论】：

我尝试使用 javascript 但我遇到了一个错误，我认为需要和模式会更容易。
当然会更容易，但最终目标是安全... :) 请记住，如果您还要在移动浏览器中使用它，请不要依赖这些 HMTL5 指令。 Derective required 也不适用于某些 iOS safari 版本。所以再次使用 JS 和 PHP 检查必填字段。

【解决方案2】：

这很有趣。 [.] 应该匹配我理解的任何非换行符，但由于某种原因，这里的密码失败了。我建议你更明确地说明你的匹配方式。例如，您可以匹配非空白字符（下面的示例），尽管如果您打算在密码中允许空格，这将无济于事。在这种情况下，您只需要在表达式中使用更广泛的允许字符列表/模式。

话虽如此，永远不要只依赖前端验证。始终进行服务器端验证或代替此验证。

<form method='POST'  action='google.com'>
Password:
<input type="password" pattern="[^\s]{8,30}" id= "Password" name="teacherPassword" required title=" 8 to 30 characters" /><br><br>         
<button type="submit"> Enter </button>
</form>

【讨论】：

我尝试了您的更改，但没有帮助。不管怎么说，还是要谢谢你！我还想知道 [^\s] 做了什么，因为我还是 HTML 和 PHP 的新手。
有趣。你运行了sn-p吗？它在那里工作。也许您的代码中还有其他元素在起作用。既然你问 [^\s] 匹配任何非空白字符。 regex101.com/r/yq0O3E/1

【解决方案3】：

使用 minlength="8" 和 maxlength="30"

【讨论】：

minlength 不是有效属性
@Eathen00 reeeeaaalllllllly？ w3schools.com/tags/tag_input.asp
@bassxzero 是 HTML5 属性，不要去 w3schools 作为权威来源。 developer.mozilla.org/en-US/docs/Web/HTML/Element/input 或 w3.org/TR/html5/…