1

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”消息。我尝试将默认消息也更改为空白，但根本没有显示任何内容。我也尝试使用图像位置作为消息，但这只是导致显示实际位置文本。

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

在此处查看库：http: //livevalidation.com/

4

4 回答 4

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/

于 2012-05-31T08:51:48.893 回答
1

我会结合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;
}
于 2012-05-31T09:02:02.740 回答
0

检查此链接可能会有所帮助：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 Live Validation 的用于验证的 jquery 插件，您可以看到它具有 validIco 和 invalidIco，如果它无效或有效，它们实际上是图像 2 显示

于 2012-05-31T09:01:14.343 回答
0

抱歉恢复这篇文章..但有需要的人有答案。它对我有用...

.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;
}
于 2013-06-25T18:13:24.433 回答