Question

我有一个网络表单正在工作，但突然间它不再适用于Chrome。这些模式在regex101.com上通过测试，表格可以通过Firefox提交，但Chrome不再喜欢它了。关于它的最令人困惑的事情是它在不同的点上都失败了，即使没有改变形式。（EG有时名字失败，有时候姓名失败 - 即使模式是相同的。有时候它会归结为电话号码或网址。无法想象为什么。）我已经将它分析到最好我的能力 - 有什么建议吗？

<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

我没有得到一个好的答案，因为我无法看到代码有什么问题。它应该是/ slash，但是从我收集的评论中你已经得到了它。

我所提供的是一个针对不支持此属性的浏览器的小javascript选项。并且在chrome中工作。所以希望这能帮到你！

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

这是一个JS fiddle

一个小小的建议，不要只测试客户端的输入。这对于向用户的反馈是有用的，但是不要在服务器端的输入上进行中继。（但我想你可能已经知道了这一点）

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

1 个答案: