wordpress评论表单验证js代码

2018年11月25日00:54:00 3 1,132 次
摘要

很多使用wordpress默认主题的朋友们往往会被提交评论时的错误提醒折磨,明明可以在前端进行的错误提示却非要跳转页面,用户体验非常不好。这里有一个简单的代码,或许能满足您的需要。

很多使用wordpress默认主题的朋友们往往会被提交评论时的错误提醒折磨,明明可以在前端进行的错误提示却非要跳转页面,用户体验非常不好。

其实网上有很多现成的解决方案,比如ajax Post Comment。对于不想安装插件的朋友,这里也有一个简单的节约方案,让你的博客顿时清爽起来。
wordpress评论表单验证js代码
代码如下:

add_action('comment_form','validateCommentForm');
function validateCommentForm(){
    ?>
<script>
fieldName = {
    'comment': '评论',
    'author': '评论者姓名',
    'email': '电子邮件地址'
};
jQuery(document).ready(function() {
    jQuery('#commentform').find("[required='required']").blur(function() {
        validateFieldValue(jQuery(this).attr('id'), jQuery(this).val())
    }).focus(function(){
       jQuery("#" + jQuery(this).attr('id') + "-error").remove();
    });
    jQuery('#commentform').submit(function(e) {
        if (jQuery(this).find("[unvalid='unvalid']").length > 0) e.preventDefault();
    });
});
function validateFieldValue(fieldId, fieldValue) {
    if (fieldId != 'email' && fieldValue == '') {
        showErrorMsg(fieldId);
        return;
    } else if (fieldId == 'email' && checkEmail(fieldValue) == false) {
        showErrorMsg(fieldId);
        return;
    } else {
        jQuery('#' + fieldId).removeAttr('unvalid');
        return;
    }
}
function showErrorMsg(unvalidFiledId) {
    errorField = jQuery('#' + unvalidFiledId);
    jQuery("#" + unvalidFiledId).after('<span id="' + unvalidFiledId + '-error"></span>');
    jQuery("#" + unvalidFiledId + "-error").css({
        'display': 'flex',
        'position': 'absolute',
        'align-items': 'center',
        'justify-content': 'center',
        'color': 'red',
        'cursor': 'text',
        'font-size': '1.2em',
        'left': errorField.position().left,
        'top': errorField.position().top,
        'height': errorField.css('height'),
        'width': errorField.css('width')
    }).html(fieldName[unvalidFiledId] + ' 为空或不合法').click(function() {
        jQuery(this).remove();
        jQuery('#'+unvalidFiledId).focus();
    });
}
function checkEmail(str) {
    var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
    if (re.test(str)) {
        return true;
    }
    return false;
}
</script>
    <?php
}

将以上代码粘贴到主题的functions.php文件即可。
或者将其中的js代码复制到单独的js文件,在header或footer引入(推荐)。
效果如下:wordpress评论表单验证js代码

avatar

评论已关闭!

目前评论:3   其中:访客  3   博主  0

    • avatar abi 0

      如何让验证在点击提交后进行,不然输入一个字就提示一次

        • avatar nice 0

          @abi 这个逻辑比较好

        • avatar 李四 0

          哈哈我来了