regex - Chrome 中的正则表达式表单验证

Question

我有一个网络表单曾经可以正常工作，但突然之间它在 Chrome 中不再工作了。这些模式通过了 regex101.com 的测试，并且可以使用 Firefox 提交表单，但 Chrome 不再喜欢它了。最令人困惑的是它在不同的点上都失败了，即使没有改变形式。 (例如，有时名字失败，有时姓氏失败 - 即使模式相同。有时它会归结为电话号码或 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>

Answer 1

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

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

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

这是一个 JS fiddle

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