Question

我正在尝试使用jQuery UI滑块和蜜罐输入字段在表单中构建反垃圾邮件机制。但到目前为止，我们仍然收到垃圾邮件。

目前我使用jquery将提交按钮呈现到其父html中，但如果以某种方式（我甚至不知道机器人将如何实现此功能）将滑块滑动到其接受的位置，按钮将仍然呈现。如果蜜罐的值为空，我也将提交按钮的onClick事件从“return false”更改为“return true”。我基本上扔了尽可能多的东西来阻止机器人，但它们仍然可以通过 - 或者至少我认为它是一个机器人，因为我们收到了大量的垃圾邮件。

我想进一步增加机器人需要经历的难度级别的想法是，只有在滑块移动到其接受位置时才呈现实际的提交按钮，并且蜂蜜罐仍然是空的。但我想在服务器端执行此操作...使用PHP和/或Smarty（模板语言）。我的思路是在滑块处于其接受位置（并且蜜罐为空）时进行AJAX调用以检索按钮，然后使用某种接受弹出/警告框，用户将单击“确定“，然后按钮才会呈现。我不确定这与我目前的设置有什么不同，但我愿意接受建议。

我的问题是，我将如何做到这一点？ AJAX可以进入Smarty文件并检索存储按钮的变量吗？用PHP怎么样 - 同样的问题，AJAX可以放入PHP文件并检索按钮变量吗？你们会认为这会从我现在的产品中得到更好的结果吗？

感谢大家的任何反馈！

$("#tst-verify-slider").draggable({
      axis: 'x',
      containment: 'parent',
      drag: function(event, ui) {
         var hp = $('#tst-verify-check').val(),
            btn = '<button class="button" type="submit" title="Submit" onclick="return false;">Submit</button>';
         if ( hp == '' ) {
            if (ui.position.left > 235) {
               $(this).animate({
                  left: 237
               }, 1);
               $('.tst-verify-submit').html(btn).attr('onClick', 'return true;');
            }
         } else {
            alert('HELL NO SON!');
            return false;
         }
      },
      stop: function(event, ui) {
         if (ui.position.left < 234) {
            $(this).animate({
               left: 2
            }, 1);
            $('.tst-verify-submit').html('').attr('onClick', 'return false;');
         }
      }
   });

   $('.tst-verify-submit button').click(function(){
      var hp = $('#tst-verify-check').val();
      if ( hp != '' ) {
         alert('HELL NO SON!');
         return false;
      }
   });

#tst-verify-wrapper {
    width: 100%;
    display: block;
}

#tst-verify-wrapper, .tst-verify-submit {
    padding: 0 0 0 170px;
}

#tst-verify-container {
    width: 300px;
    height: 65px;
    margin: 30px 0;
    display: block;
    border-radius: 12px;
    position: relative;
    border: 2px solid #ddd;
    transition: all 350ms ease-in-out;
}

#tst-verify-container #tst-verify-slider {
    position: absolute;
    width: 61px;
    height: 61px;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #db0b0b;
    border-radius: 9px;
    left: 2px;
    cursor: pointer;
}

#tst-verify-container p {
    text-align: center;
    line-height: 65px;
    color: #666;
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<!-- SLIDER DIVS -->
<div id="tst-verify-wrapper">
     <div id="tst-verify-container">
      <div id="tst-verify-slider">
      </div>
      <p>Slide to Continue. <i class="fa fa-arrow-right" aria-hidden="true"></i></p>
   </div>
   <input type="hidden" id="tst-verify-check" placeholder="Phone Number" value="" required>
</div>

<!-- HONEY POT INPUT FIELD -->
<input type="hidden" id="tst-verify-check" placeholder="Phone Number" value="asdasd" required>

<!-- SUBMIT BUTTON PARENT DIV -->
<div class="tst-verify-submit"></div>

<!-- ORIGINAL SMARTY VAR RENDERING THE SUBMIT BUTTON -->
<!-- I REMOVED IT AND HAVE THE RAW HTML IN A JS VAR -->
<!--
      <div class="tst-verify-submit">  {$submit_button} </div>
-->

Ajax，PHP和Smarty - 垃圾邮件机器人防御机制

0 个答案: