使用 jQuery 插件检查用户名是否有效

Question

我正在使用 jQuery 验证插件来验证表单。我有一个需要验证的用户名字段。到目前为止，这就是我所拥有的：

$(".personal_form").validate({
        errorElement: 'div',
        rules: {
            username: {
                required: true,
                maxlength: 15,
                remote: {
                    url: "usernameChecker.php",
                        type: "post",
                        data: {
                          username: function() {
                            return $( "#username" ).val();
                            },
                        },
                    },
            },

        },

        messages: {

            username: {
                required: "Please enter a username",
                maxlength: "Your username should not exceed 15 characters.",
                remote: "This username is taken."
            },

        },

        });

我想这样做，如果有人输入无效的用户名，它就会显示错误。例如，如果有人输入特殊字符："!@#$%^&*()_+=~`-"，它会显示错误。有效的用户名是包含字母或数字的用户名。我该怎么做？

Answer 1

创建自定义验证规则，根据您的规则检查用户名：

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

并将其添加到您的验证中

Answer 2

您可以 pattern 属性 <input type="text"> 元素 RegExp \w+|d\+ 匹配单词或数字字符，<label> 元素，css :focus、:invalid、:after

#username:focus:invalid + label[for="username"]:after {
  content: "input must contain only letters and numbers";
  color:red;
}

<input type="text" 
       pattern="\w+|d\+" 
       id="username"
       placeholder="input letters and numbers" />
<label for="username"></label>

Answer 3

使用 jQuery.validator.addMethod( name, method [, message ] ) 对表单字段进行自定义验证。

https://jqueryvalidation.org/jQuery.validator.addMethod/

Answer 4

将此添加到：

$.validator.addMethod(
    "regex",
    function(value, element, regexp) {
        var check = false;
        return this.optional(element) || regexp.test(value);
    },
    "Please provide a valid username."
);

$(".personal_form").validate({
    errorElement: 'div',
    rules: {
        username: {
            required: true,
            maxlength: 15,
            regex: /^[a-zA-Z0-9 ]+$/,
            remote: {
                url: "usernameChecker.php",
                    type: "post",
                    data: {
                      username: function() {
                        return $( "#username" ).val();
                        },
                    },
                },
        },

    },

    messages: {

        username: {
            required: "Please enter a username",
            maxlength: "Your username should not exceed 15 characters.",
            remote: "This username is taken."
        },

    },

});

使用 jQuery 插件检查用户名是否有效

Checking if username is valid using jQuery plugin

javascript

jquery

jquery-validate