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空间，但允许显示背景。 / p>

jsFiddle（当然使用不同的图片）：http://jsfiddle.net/uqRQp/

Answer 2

我将background-repeat: no-repeat与某些东西结合起来，将文字推到视线之外：

.LV_valid
{
    /* This ensures the element is displayed as a block-level element
    so that all the following CSS rules apply. */        
    display: inline-block;          

    /* This displays your image, but only once. */
    background-image: url('green_tick.gif');
    background-repeat: no-repeat;

    /* This pushes the text out of the way so it can't be seen. */
    height: 0px !important;
    height: /**/ 11px; /* IE consistency hack */
    padding-top: 11px;
    overflow: hidden;
}

Answer 3

点击此链接可能有所帮助：http://andreaslagerkvist.com/jquery/live-validation/#jquery-plugin-example-code

jQuery('#jquery-live-validation-example').liveValidation({
validIco:    WEBROOT + 'aFramework/Modules/Base/gfx/jquery.liveValidation-valid.png', 
invalidIco: WEBROOT + 'aFramework/Modules/Base/gfx/jquery.liveValidation-invalid.png', 
required:    ['name', 'email', 'foo'], 
fields:        {foo: /^\S.*$/}

}）;

这是一个用于验证的jquery插件，名为jQuery Live Validation，因为你可以看到它有validIco和invalidIco，如果它无效或有效，它们实际上是图像2显示

Answer 4

很抱歉恢复这篇文章..但是对于那些需要它的人来说有答案。它对我有用......

.LV_valid
{
    display: inline-block;       
    color: transparent;
    text-indent: 100%; 
    background-image: url('right.png');
    background-repeat: no-repeat;
    overflow: hidden;
}

.LV_invalid
{
    display: inline-block;       
    color: transparent;
    text-indent: 100%; 
    background-image: url('wrong.png');
    background-repeat: no-repeat;
    overflow: hidden;
}

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

4 个答案: