Question

我使用jquery验证插件来验证用户名的输入。

$.validator.addMethod("alphanumeric", function(value, element) {
    return this.optional(element) || /^[a-zA-Z0-9\-]+$/i.test(value);
}, "Your username can only contain letters, numbers and hyphens.<br />Spaces and special characters are not permitted.");         

$('.setUsername-form').validate({
    errorElement: 'label', //default input error message container
    errorClass: 'help-inline', // default input error message class
    focusInvalid: false, // do not focus the last invalid input
    ignore: "",
    rules: {
        chosenUsername: {
            required: true,
            minlength: 4,
            alphanumeric: true                          
        }
    },

＆p> 堆栈溢出错误＆＃34;您的用户名只能包含....＆＃34;。这很好。

stackoverflow 没有错误 - 太棒了！

没有输出的

堆栈溢出错误。这是一个可接受的用户名，应该可以使用。

有什么想法吗？我无法发现这个问题。这是正则表达式吗？我试图允许使用字母字符，数字字符和连字符。 A-Z，a-z和 - 。 [a-zA-Z0-9\-]不正确吗？

Answer 1

我怀疑您的问题是代码中的其他位置。

使用上面发布的代码使用jquery-validate实现表单是一个小提琴：

http://jsfiddle.net/klenwell/ZjWWE/

var errorMessage = "Your username can only contain letters, numbers and hyphens.<br />Spaces and special characters are not permitted.";

$.validator.addMethod("alphanumeric", function (value, element) {
    return this.optional(element) || /^[a-zA-Z0-9\-]+$/i.test(value);
}, errorMessage);

function validateForm() {
    var $form = $('form.setUsername-form');
    $form.validate({
        errorElement: 'label', //default input error message container
        errorClass: 'help-inline', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        rules: {
            chosenUsername: {
                required: true,
                minlength: 4,
                alphanumeric: true
            }
        },
    });

    if ($form.valid()) {
        $('div.form-status').css('color', 'green').text('form is valid');
    } else {
        $('div.form-status').css('color', 'red').text('form is invalid');
    }

    return false;
}

$('button.submit-form').on('click', validateForm);

您可以看到它的行为符合预期（在Chrome中测试）：

堆栈溢出：无效
stackoverflow ：有效
堆叠溢出：有效

JQuery验证插件部分功能

1 个答案: