Question

我正在使用必需的属性来检查我的表单上的模式，这是用户的发货信息等。我现在遇到了2个问题。必需属性在Safari或旧IE中不起作用。同样在地址模式中，如果有“。”让我们说“而不是北”，用户输入“N”。它出现了无效模式。使用javascript验证它会更好吗？此外，我可以在HTML中使用其他属性来验证它，因为我相信模式不需要用户启用javascript。

以下是我表单中代码的HTML部分：

<input type="text" name="first_name" required pattern="[a-zA-Z]{1,}" size="30"/>
<input type="text" name="last_name" required pattern="[a-zA-Z]{1,}" size="30"/>
<input type="text" name="address1" required pattern="[a-zA-Z0-9 ]{1,}" size="30"/>
<input type="text" name="address2" pattern="[a-zA-Z0-9 ]{1,}" size="30"/>
<input type="text" name="city" required pattern="[a-zA-Z]{1,}" size="30"/>
<input type="text" name="zip" required pattern="[a-zA-Z0-9]{1,}" size="30"/>
<input type="email" name="email" required size="30" value=""/>
<input type="text" name="telephone" required pattern="[0-9]{9,}" size="30"/>
<input type="submit" id="checkout" name="checkout" class="button" value="Checkout" />

Answer 1

你应该使用javascript检查内部的内容，或者只是告诉用户你要求他输入＆＃34; North＆＃34;而不是＆＃34; N。＆＃34;。用户并不介意这些限制。关于所需属性的问题：使用javascript以及

Answer 2

使用javascript的[a-zA-Z]（或\w）验证姓名/电子邮件/地址是一个坏主意™

您正在对有效的用户名做出一些非常有限的假设（所有严格的，甚至Unicode 不代表每个人的名字......）。看看（例如）这里：http://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/
例如，中国/阿拉伯语/ russion / etc女性的姓氏与美国人（在您的目标区域内）结婚（甚至认为bi-di文本......）。

此外，输入类型“电子邮件”是（如您所知）html5中的新内容。您可以提供回退（填充/填充/创建自己的）来验证电子邮件。然而..验证电子邮件已经很难做了，而且现在所有（新的）国际化（顶级）域名都变得更糟（如果不是不可能，不需要经常更新例程）列表仍在增长）。了解这一点，最终会导致即使是填充/填充（外部库）也难以正确验证有效的电子邮件地址。

最后（因为你也想在聊天时告诉加拿大），地址：
那么：加拿大魁北克省的CôteSaintLuc（只是一个例子）？

我是认真的吗？是的，取决于您编码的内容（地区/受众/重要级别）。

如果你对它很好，并且理解（非常现实的）问题，那么一切都很好......只要你没有将它用于某些合法的政府税制等。 ..或航空公司预订网站......等。

然而...... 解决方案实际上很简单 ：

对您接受的内容放松（对于此类字段，客户端验证不是必需的），
对所有本地化字段（包括电子邮件，地址和名称）使用Unicode（接受您无法解决Unicode不能代表每个人姓名的问题，但在将来修复的问题，例如中国不会接受自（我认为）2012年以来，新生儿的这些角色，
确保服务器端没有恶意代码！
编辑你必须清理服务器端的每个输入（永远不要相信javascript），这意味着你也应该有代码/例程来处理服务器端脚本认为无效的输入（您可以使用ajax等与用户通信，并且可以选择在禁用javascript时提供回退（完整页面刷新））。
拥有所有这些，有点为您提供“奖金功能”，您遇到的跨浏览器问题不再是您的问题，您可以/应该使用新功能作为锦上添花：是必需的值是否为空，电子邮件地址是否包含“@”，字符串是否包含非法的“控制代码”/非法/保留字符等？如果你想要回退机制，这些功能相对容易和可靠的垫片（只是一个例子：http://html5please.com/#polyfill）！
处理/传递/存储此数据时，不要忘记这些“规则”（相关）（您不会是第一个意外地将Unicode数据填入本地化转码代码页的数据库中）！

希望这有帮助！

运输详细信息验证表格

2 个答案: