代码之家 › 专栏 › 技术社区 › adamdehaven

jQuery验证插件-在错误消息中显示最小长度“要使用的字符”

validation jquery-validate jquery

adamdehaven · 技术社区 · 12 年前

我正在使用 jQuery Validate Plugin 验证我网站上的表格。我想更改默认值 minlength 消息,以显示字段中仍然需要的字符数,并使该数字随着用户在 input 领域

例如,如果 最小长度 规则是15个字符,字段中有2个字符,错误消息将显示 "Please enter at least 13 more characters."

为了简单起见,这里是我的jQuery。 下面的所有代码放在一起时都无法正常工作,所以我需要一个有效的解决方案

这是小提琴: http://jsfiddle.net/ac2T2/1/

这是我的代码:

$('#contactForm').validate({
    rules: {
        contactName: {
            minlength: 15
        }
    }
});

我想添加一些代码来执行以下操作:

var numOfCharactersToGo = 15 - parseInt($('contactName').val().length);

然后理论上我可以更改我的默认jQuery消息 最小长度 如图所示:

jQuery.extend(jQuery.validator.messages, {
    minlength: jQuery.validator.format('Please enter at least ' + numOfCharactersToGo + ' more characters.')
});

2 回复 | 直到 12 年前

adamdehaven 12 年前

感谢@Sparky的回答,让我朝着正确的方向前进,以下是最后的答案,以防其他人想要同样的功能。

这是小提琴: http://jsfiddle.net/ZhRGA/8/

HTML格式

<form id="myform">
    <input type="text" name="field1" id="field1" />
    <br/>
    <input type="submit" />
</form>

jQuery公司

$(document).ready(function () {
var minChar = 15;
    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                minlength: minChar
            }
        },
        messages: {
            field1: {
                minlength: function () {
                    return [
                        (minChar - parseInt($('#field1').val().length)) +
                        ' more characters to go.'];

                }
            }
        }
    });
});

Sparky 12 年前

您无法动态更改 rules 或 messages 在表单上初始化插件之后,无需使用内置方法进行此类更改。

关于你能去哪里,我只知道一种方法 动态地 超过初始化后的任何规则和消息。就是这样 the rules('add') method .

$('#field').on('keyup', function () {  
    current = 15 - parseInt($(this).val().length);
    $(this).rules('add', {
        minlength: 15,
        messages: {
            minlength: current + " characters to go"
        }
    });
});

你需要在你的 keyup 事件处理程序函数或用于动态计数字符的任何函数。这个演示很粗糙,有一些问题需要克服,但它表明可以这是可能的。

非常粗糙的演示: http://jsfiddle.net/ZhRGA/5/