javascript - LiveValidation - 将验证消息更改为图片？

Question

LiveValidation 是用于验证数据的 JavaScript 库。当用户输入信息时，我使用它来验证表单。目前出现的验证消息设置如下:

var username = new LiveValidation('username', { validMessage: 'Valid Username.', wait: 500});

但是，我想将其从说“有效用户名”更改为。简单地显示一个绿色勾号图像。我试图通过将有效消息区域的 CSS 更改为以下内容来做到这一点:

.LV_valid
{
    background-image: url('green_tick.gif');
    font-size:10px;
    color:#33CC33;
}

这会导致在打印的整个消息中显示绿色勾号，并且由于图像只有 11x11，所以它适合大约 5 或 6 张图像。我尝试删除有效消息，但随后它从 LiveValidation.js 文件中打印出默认的“Thankyou”消息。我也尝试将默认消息更改为空白，但随后什么也没有显示。我还尝试使用图像位置作为消息，但这只会导致显示 actaul 位置文本。

有谁知道如何显示图像而不是文本？

在此处查看图书馆:http://livevalidation.com/

Answer 1

这个 CSS 应该做你想做的事:

.LV_valid
{
    background-image: url('green_tick.gif');
    width: 0;
    height: 0;
    padding: 11px 11px 0 0;
    overflow: hidden;
}

说明:这些宽度、高度和溢出值隐藏了元素的所有内容，填充值以不允许显示内容但允许显示背景的方式添加 11x11 空间。

jsFiddle(当然使用不同的图片):http://jsfiddle.net/uqRQp/