来自网站联系表单的垃圾邮件回复绕过了“必需”和“模式”属性

Question

我在一个收到大量垃圾邮件的网站上有一个联系表。它托管在Github上，因此我的服务器端验证/验证码方法非常有限。所有字段始终具有“ required”属性，并且我向表单字段添加了一些“ pattern”属性以及一个非常基本的安全性问题。

最初，我会收到垃圾邮件回复，其中所有字段均已填写，但名称应为随机数字，电话号码应为名称，电子邮件以及消息区域中的URL。

当我第一次仅添加由javascript / jquery处理的安全性问题时，它似乎没有任何作用，因此我假设该机器人可以从代码中读取正确的答案？更令人担忧的是，最近在表单字段中添加了一些“模式”属性后，我开始收到垃圾邮件响应，该响应仍包含应包含名称的随机数字，现在电话和电子邮件字段不存在（不提交） /输入）。

我不知道当字段与模式验证不匹配时如何提交字段，或者当两个字段仍具有'required'属性时如何将其留空。我已经亲自测试了表单，所有验证和必填字段均按预期运行，并且像以前一样接收所有字段，因此似乎垃圾邮件发送者似乎忽略了这些规则。

如果有人可以解释在这里发生了什么？同样，或者，如果有人知道有一种更好的，行之有效的方法可以消除垃圾邮件回复，该方式可以与我拥有的形式一起使用，并且可以在Github上托管网站，那么将不胜感激！

如果您想在实时环境中查看该表格，则该网站为http://orionimportgroup.com/。

var n1 = Math.round(Math.random() * 10 + 1);
var n2 = Math.round(Math.random() * 10 + 1);

$('document').ready(function(){
	$("#a").val(n1 + " + " + n2);
	document.getElementsByName('captcha')[0].placeholder=("CAPTCHA CODE: " + n1 + "+" + n2);
});

$('form').submit(function(e) {
	if (eval($("#captcha").val()) == (parseInt(n1) + parseInt(n2))) {
		e.preventDefault();
		$.ajax({
			url: "https://docs.google.com/a/blakedavies.net/forms/d/e/1FAIpQLSfHdHMJePTJ3R5JOtBrH8zdPdX74eXQ8TDFIGjgkbIbGNdpnQ/formResponse",
			data: $(this).serialize(),
			type: "POST",
			dataType: "xml",
			success: function(data) {
				console.log('Submission successful');
			},
			error: function(xhr, status, error) {
				console.log('Submission failed: ' + error);
			}
		});
		$('#gform *').fadeOut(0);
		$('#contact-box *').fadeOut(0);
		$('#gform').prepend(
			'<div class="thank-you-box"><p class="thank-you">Hi, thanks for reaching out! We will get back to you within 24 hours.</p><p class="thank-you">If your issue cannot wait, you can also reach us via our <a href="https://www.facebook.com/Orion-Import-Group-110501569627947/">Facebook Page</a> or call 0429-105-580.</p></div>'
		);
		return true;
	}
	else{
		alert('You have not entered the correct captcha code value');
		return false;
	}
});

<form name="gform" id="gform" enctype="text/plain" action="https://docs.google.com/a/blakedavies.net/forms/d/e/1FAIpQLSfHdHMJePTJ3R5JOtBrH8zdPdX74eXQ8TDFIGjgkbIbGNdpnQ/formResponse">
  <div class="inner">
	  <input name="entry.1683926249" id="entry.1683926249" placeholder="Name" required pattern="[A-Za-z' -]+" oninvalid="setCustomValidity('Please enter a valid name using letters only.')" onchange="try{setCustomValidity('')}catch(e){}" />
		<input name="entry.189066148" id="entry.189066148" placeholder="Phone" required pattern="[0-9 -]+" oninvalid="setCustomValidity('Please enter a valid phone number using numbers only.')" onchange="try{setCustomValidity('')}catch(e){}" />
		<input name="entry.429019481" id="entry.429019481" placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$" oninvalid="setCustomValidity('Please enter a valid email making sure to include an @ sign and the domain suffix (.com .net etc.).')" onchange="try{setCustomValidity('')}catch(e){}" />
	</div>
	<div class="inner">
		<textarea name="entry.2094840737" id="entry.2094840737" placeholder="Message" required></textarea>
		<input name="captcha" id="captcha" placeholder="CAPTCHA CODE: 5+7" required />
	</div>
  <input class="submit" name="submit" type="submit" value="Send Message" />
</form>
<script src="js/contactform.js" type="text/javascript"></script>

Answer 1

一种防止垃圾邮件的方法是蜜罐技术，它被证明是有效的，并且为我公司的网站阻止了 90% 以上的垃圾邮件。

要实现蜜罐技术，所需要做的就是在表单中添加一个隐藏的表单域。

这就是表单提交是否为垃圾邮件的原因：
真实用户看不到隐藏字段，因此他们不会提交任何值。但是，
垃圾邮件机器人仍然会在表单的标记中看到该字段，使用某些内容自动填充它，然后将其与表单的其余部分一起提交。

因此，从那里需要做的就是测试隐藏字段是否使用值提交。如果是，则提交内容可被视为垃圾邮件。

阅读有关蜜罐技术的更多信息

回复评论和其他信息（我还不能评论）

@user7531422，试试这样：
添加一个类到一个附加的输入元素（honeypot 元素），用 CSS 样式隐藏它display: none;，让它看起来与 name 或 phone 字段相同，但更改 name 属性。
大多数机器人只会读取 HTML 标记，不会注意到 CSS 规则，而且大多数机器人并不那么聪明，无法深入研究每一段代码。

在提交表单之前直接检查您的隐藏字段是否有数据（如果不为空，请检查它的值），如果有，甚至不发送表单。
这是一个客户端解决方案。