Valine评论系统强制输入昵称和邮箱

开始之前我会先介绍下什么是Valine、Valine弊端,然后我会给出前端强制输入昵称和邮箱的方法(jquery)和 Valine 模仿 gitalk 的css样式。

什么是Valine

Valine - 一款快速、简洁且高效的无后端评论系统
Valine 诞生于2017年8月7日,是一款基于Leancloud的快速、简洁且高效的无后端评论系统。

特性

  • 快速

Valine弊端

让Valine强制输入评论昵称和邮箱

原理就是当点击评论框后,检测昵称、邮箱是否填写,如果没有填写就要求强制填写,同时设置text为空。

引入jquery

// 要记得引入JQ
//<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

$(document).ready(function(){ 
//检测是否有评论框
if($("#vcomments").html()){
    //定义变量
    var c_name = $('#vcomments input[name="nick"]');
    var c_mail = $('#vcomments input[type="email"]');
    var c_text = $('#veditor');
    var mailzz = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    //placeholder
    var c_placeholder = c_text.attr('placeholder');
    //隐藏
    $(".vcontrol .text-right button").hide();
    $(".vcontrol .text-right").prepend('<span class="submit_f vbtn">回复</span>');
    $('body').on('click','.submit_f',function(){
        if(nullpd(c_name.val())){ 
            alert("昵称无效");
            return false;
        }
        if(!mailzz.test(c_mail.val())){
            alert("邮箱无效");
            return false;
        }
        if(!c_text.val()){
            alert("留言评论不能为空");
            return false;
        }
        $('.vsubmit').click();

    });
    //判断空
    function nullpd(str){
        if(str == "" || str == null || str == undefined){
            return true;
        }else{
            return false;
        }
    }
 }
}); 

测试效果

可以在下面试试通常情况下能否不输入用户名和邮箱提交评论!(请勿使用控制台作弊)

原理就是把提交按钮隐藏了,给了一个假的出来,当然依然会有一个小bug~

Valine 模仿 gitalk 的css样式

/*去浏览器内核版本和系统版本*/
.post-comment .power,.post-comment .vsys{
    display: none!important;
}
.post-comment .vcard{
    padding-bottom: 1rem!important;
}
.post-comment .vquote .vcard{
    padding-right: 0!important;
}
.post-comment .vimg{
    border-radius: 3px!important;
    border: 0!important;
}
.post-comment .vcontent.expand:after{
    content: "查看更多"!important;
}
.post-comment .vcontent.expand:before{
    bottom: 3.16rem!important;
}
.post-comment .vcard .vimg{
    margin-right: 1rem!important;
}
.post-comment .vcard .vh{
    padding: 0.75em 1em!important;
    background-color: #f9f9f9!important;
    border: 0!important;
}
.post-comment .vcard .vh:hover{
    -webkit-box-shadow: 0 0.625em 3.75em 0 #f4f4f4;
    box-shadow: 0 0.625em 3.75em 0 #f4f4f4;
}
.post-comment .vmeta,.post-comment .vhead{
    display: inline-block;
}
.post-comment .vhead .vnick{
    color: #6190e8!important;
    margin-right: 0!important;
}
.post-comment .vmeta .vtime:before{
    content: "发布于 ";
}
.post-comment .vhead  .vnick:before{
    background: #6190e8!important;
}
.post-comment .vcard .vcontent{
    background-color: #f9f9f9!important;
}
.post-comment .vmeta .vat{
    display: none;
}
.post-comment .vcard .vh:hover > .vmeta .vat{
    display: block;
}
.post-comment .vquote {
    border: 0!important;
}
.post-comment .vquote .vcard{
    padding-top: .8rem!important;
}
.post-comment .vquote .vcard .vh{
    border: 1px dashed hsla(0,0%,93%,.5)!important;
}
推荐