Chrome 中的正则表达式表单验证答案

【问题标题】：Regular expression form validation in ChromeChrome 中的正则表达式表单验证
【发布时间】：2017-02-01 11:13:20
【问题描述】：

我有一个 Web 表单曾经可以正常工作，但突然之间，它不再在 Chrome 中工作了。这些模式在 regex101.com 上通过了测试，并且可以使用 Firefox 提交表单，但 Chrome 不再喜欢它了。最令人困惑的是它在不同的点上都失败了，即使没有改变形式。（EG有时名字失败，有时姓氏失败 - 即使模式相同。有时它会归结为电话号码或URL。无法想象为什么。）我已经尽我所能分析了它 -有什么建议吗？

<form name="form-careers" enctype="multipart/form-data" action="/careers/#form" method="POST">

<div class="form_labels">
    <p><label for="fname">First Name:</label></p>
</div>
<div class="form_inputs">
    <p><input type="text" name="fname" id="fname" placeholder="*" pattern="/^([A-Za-z-\ \.]+)$/" value="<?php if (isset($fname)) { echo $fname; } ?>" required /></p>
    <div class="error" id="error-fname"><?php if (isset($err_fname)) { echo $err_fname; } ?><?php if (isset($err_fname2)) { echo $err_fname2; } ?></div>
</div>

<div class="form_labels">
    <p><label for="lname">Last Name:</label></p>
</div>
<div class="form_inputs">
    <p><input type="text" name="lname" id="lname" placeholder="*" pattern="/^([A-Za-z-\ \.]+)$/" value="<?php if (isset($lname)) { echo $lname; } ?>" required /></p>
    <div class="error" id="error-lname"><?php if (isset($err_lname)) { echo $err_lname; } ?><?php if (isset($err_lname2)) { echo $err_lname2; } ?></div>
</div>

<div class="form_labels">
    <p><label for="email">Email:</label></p>
</div>
<div class="form_inputs">
    <p><input type="email" name="email" id="email" placeholder="*" pattern="/^([\dA-Za-z0-9\._-]+)@([\dA-Za-z0-9\._-]+)\.([A-Za-z]{2,10})$/" value="<?php if (isset($email)) { echo $email; } ?>" required /></p>
    <div class="error" id="error-email"><?php if (isset($err_email)) { echo $err_email; } ?><?php if (isset($err_email2)) { echo $err_email2; } ?></div>
</div>

<div class="form_labels">
    <p><label for="phone">Phone:</label></p>
</div>
<div class="form_inputs">
    <p><input type="tel" name="phone" id="phone" placeholder="* (###-###-####)" pattern="/^([\d]{3})\-([\d]{3})\-([\d]{4})$/" value="<?php if (isset($phone)) { echo $phone; } ?>" required /></p>
    <div class="error" id="error-phone"><?php if (isset($err_phone)) { echo $err_phone; } ?><?php if (isset($err_phone2)) { echo $err_phone2; } ?></div>
</div>

<div class="form_labels">
    <p><label for="role">Desired Role:</label></p>
</div>
<div class="form_inputs">
    <p><input type="text" name="role" id="role" placeholder="*" pattern="/^([\\\/A-Za-z-\ \.]+)$/" value="<?php if (isset($role)) { echo $role; } ?>" required /></p>
    <div class="error" id="error-role"><?php if (isset($err_role)) { echo $err_role; } ?><?php if (isset($err_role2)) { echo $err_role2; } ?></div>
</div>

<div class="form_labels">
    <p><label for="portfolio">Portfolio/Website:</label></p>
</div>
<div class="form_inputs">
    <p><input type="url" name="portfolio" id="portfolio" placeholder="(http://...)" pattern="/^(https?:\/\/)?([\dA-Za-z\.-]+)\.([A-Za-z\.]{2,6})([\/\w \.-]*)*\/?$/" value="<?php if (isset($portfolio)) { echo $portfolio; } ?>" required /></p>
    <div class="error" id="error-portfolio"><?php if (isset($err_portfolio)) { echo $err_portfolio; } ?><?php if (isset($err_portfolio2)) { echo $err_portfolio2; } ?></div>
</div>

<div class="form_labels">
    <p><label for="resume">Upload Resume: (optional)</label></p>
</div>
<div class="form_inputs">
    <p><input type="file" name="resume" id="resume" accept=".pdf, .txt, .rtf, .doc, .docx" style="margin-bottom:2px;"/>
    <span style="color:#777;">(pdf, txt, rtf, doc, docx)</span></p>
</div>

<input type="hidden" name="formtype" id="formtype" value="careers">

<div class="form_labels submit">
    <p>&nbsp;</p>
</div>
<div class="form_inputs">
    <a href="javascript:void(0);"><input type="submit" value="Submit" name="action" class="button-red" ></a>
</div>

【问题讨论】：

遇到了同样的问题。我可能已经发疯了，但我很确定它输入验证模式在过去几天刚刚停止在 chrome 上工作。但是，我不相信 chrome 会在我们不知情的情况下自行更新。
您在 DevTools 控制台中看到任何警告吗？
控制台中没有任何内容...
不应该是pattern="^([A-Za-z-\ \.]+)$" 没有/s 围绕正则表达式？您也可以将其写为pattern="[A-Za-z .-]+"，因为该模式默认是锚定的，无需在这些位置转义连字符和点。
我最初拥有所有在正则表达式周围没有斜线的模式，并在出现此问题时根据另一篇帖子的建议添加了它们。但模式是否包含在斜杠中似乎并不重要——它只是在不同的地方失败了。还是不解……

标签： regex forms validation

【解决方案1】：

我没有一个好的答案，因为我看不出代码有什么问题。它应该没有 / 斜线，但从评论中我收集到你已经知道了。

我必须为不支持此属性的浏览器提供一个小的 javascript 选项。并在铬中工作。所以希望这对你有帮助！

if ( ! input.hasOwnProperty('pattern') && ~input.value.search(input.pattern)) {
// Valid input field for browsers which don't support `pattern` attribute.
}

这是一个 JS fiddle

还有一个小建议，不要只在客户端测试输入。这对于向用户提供反馈很有用，但不要在服务器端传递正确的输入。（但我想你可能已经知道了）

【讨论】：