简单实现评论提交前二次确认

在评论提交前,增加一个必须点击的checkbox确认框,增加二次验证,防止机器人自动发布。
注意:对苹果系统的Safari浏览器无效。

1、方法:只需在提交按钮前再增加一个类型为checkboxinput标签,然后定义 required 属性。
2、美化:一个光秃秃的复选框是不是显得有些丑陋?可以借助css3把按钮美化一下,如类似iPhone开关的风格。
效果(点击试试):

html部分:

<p title="提交评论前请先确认"><input type="checkbox" value="checkbox" id="checkbox_1" class="checkbox_sub" required="required" /><label for="checkbox_1"></label></p>

CSS部分

/*checkbox*/
.checkbox_sub{
    display: none;
}

.checkbox_sub + label {
    background-color: #bdbdbd;
    padding: 9px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    margin-right: 30px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    width: 40px;
    height: 15px;
}

.checkbox_sub  + label:after {
    content: ' ';
    position: absolute;
    top: 0;
    -webkit-transition: box-shadow 0.1s ease-in;
    transition: box-shadow 0.1s ease-in;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0,0,0,0.4);
}

.checkbox_sub  + label:before {
    content: ' ';
    position: absolute;
    background: white;
    top: 1px;
    left: 1px;
    z-index: 999999;
    width: 31px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    height: 31px;
    border-radius: 100px;
    box-shadow: 0 3px 1px rgba(0,0,0,0.05), 0 0px 1px rgba(0,0,0,0.3);
}

.checkbox_sub:active + label:after {
    box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee;
}

.checkbox_sub:active + label:before {
    width: 37px;
}

.checkbox_sub:checked:active + label:before {
    width: 37px;
    left: 20px;
}

.checkbox_sub  + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.checkbox_sub:checked + label:before {
    content: ' ';
    position: absolute;
    left: 26px;
    border-radius: 100px;
}

.checkbox_sub:checked + label:after {
    content: ' ';
    font-size: 1.5em;
    position: absolute;
    background: #4cda60;
    box-shadow: 0 0 1px #4cda60;
}

参考资料:
1、W3School:HTML 5 input required 属性
2、使用CSS3美化复选框checkbox

Mondo

About

Loekman,医务工作者。

13 条评论

  1. 陈大猫 陈大猫   Windows 10 x64 Edition Firefox 52.0

    这个不错,正为垃圾评论烦恼(虽然也能被系统spam识别,但在后台看到也很烦),马上用起。

    回复
    1. Loekman Loekman   Windows 7 Firefox 56.0
      @陈大猫 

      感觉用过之后效果还可以,(ps:技术含量不高,不知道有没有被破解的可能)

      回复
  2. Viki Viki   Windows 7 x64 Edition Firefox 56.0

    你这一天折腾的玩意多,我一般就是网上搜,直接搬上来。 icon_mrgreen.gif

    回复
    1. Loekman Loekman   Windows 7 x64 Edition Firefox 56.0
      @Viki 

      也只是在网上搜来的基础上深入了一下

      回复
  3. Ton Ton   Windows 10 Google Chrome 55.0.2883.87

    我来只是欣赏下域名, icon_wink.gif

    回复
    1. Loekman Loekman   Windows 7 x64 Edition Firefox 56.0
      @Ton 

      贼个域名挺一般的呀

      回复
  4. 山小炮 山小炮   Windows 7 Google Chrome 42.0.2311.152

    不错呀。有机会可以用到,应该能防止一部分垃圾评论~~

    回复
    1. Loekman Loekman   Mac OS X Safari 10.0
      @山小炮 

      可以试试^_^

      回复
  5. 林海草原 林海草原   GNU/Linux x64 Firefox 52.0

    博主,允许我咨询一下,html代码应该是咋comment.php里面添加吧,不过css代码怎么添加?我是门外汉,我只会根据现成的代码改其他代码,却不会修改css,完全看不懂,博主可以告诉我这串css代码在哪添加吗?谢谢!

    回复
    1. Loekman Loekman   Mac OS X Safari 10.0
      @林海草原 

      加到主题文件夹下的css文件中,可能是style.css

      回复
  6. 老何 老何   Windows 10 x64 Edition Google Chrome 62.0.3202.75

    收下,马上应用 icon_biggrin.gif

    回复
    1. Loekman Loekman   Mac OS X Safari 10.0
      @老何 

      实用性不错吧嘿嘿

      回复
  7. 木先森 木先森   Windows XP Google Chrome 49.0.2623.112

    用了,但是可能放置位置不对,不点复选框,依然可以提交评论。评论模板文件已发你邮箱,如有空,帮忙看看该如何插入代码,谢过。

    回复
填写评论表单

icon_mrgreen.gificon_neutral.gificon_twisted.gificon_arrow.gificon_eek.gificon_smile.gificon_confused.gificon_cool.gificon_evil.gificon_biggrin.gificon_idea.gificon_redface.gificon_razz.gificon_rolleyes.gificon_wink.gificon_cry.gificon_surprised.gificon_lol.gificon_mad.gificon_sad.gificon_exclaim.gificon_question.gif