Question

您好我正在尝试为我的网站编写用户验证脚本，但我有点不对，因为它无法正常工作

：我的代码 jscript：

descriptorMale[1].getBeginner();
descriptorFemale[3].setFromAge(18);

和一个html输入表单：

$(document).ready(function() {
    $('input[name*="username"]').keyup(validateuser);
});

function validateuser() {
    var username = $('input[name="username"]').val();

    if(username == ""){
        $('input[name="username"]').attr('id', 'invalid');
    } else {
        $('input[name="username"]').validate({
        submitHandler: function(form) {
            $('input[name="username"]').attr('id', 'valid');
        }
    });
    }
}

所以这个脚本所要做的就是设置一个id输入，如果它有效或者不是，并将边框颜色改为红色或绿色，所以首先如果我清除该字段并且它是空的我有红色边框但是如果我写的东西仍然保持红色，没有任何变化，所以可能代码的第二部分不工作只是不确定为什么，如果有人能帮我解决这个问题真的很好

Answer 1

如果您使用的是JQuery验证插件，那么您应该注意，您要验证的选择器不应该是input标记，而是form，如下所述：

https://jqueryvalidation.org/validate

如果我错了，请纠正我。

要在keyup之后验证输入，以下代码可能会有所帮助：

替换它：

$('input[name="username"]').validate({
       submitHandler: function(form) {
           $('input[name="username"]').attr('id', 'valid');
}

有了这个：

var regex = [A-Za-z0-9\w]{4,20};
$(this).attr('id', regex.test($(this).val())?'valid':'invalid');

Answer 2

这是一个仅使用jQuery（无插件）的完整示例：

<head runat="server">
    <title></title>
    <style type="text/css">
        .valid {
            border: 5px solid green;
        }

        .invalid {
            border: 5px solid red;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {

            jQuery('#username').on('input', function () {

                $("#username").removeClass();

                var username = $(this).val();
                var isValid = /^[a-zA-Z0-9]*$/.test(username);
                if (isValid)
                    $("#username").addClass("valid");
                else
                    $("#username").addClass("invalid");
            });
        });
    </script>
</head>
<body>
    <input type="text" name="username" id="username" />
</body>

修改

根据正则表达式和字符长度进行验证：

$(function () { jQuery('#username').on('input', function () { $("#username").removeClass(); var username = $(this).val(); var isValid = /^[a-zA-Z0-9]*$/.test(username); var length = username.length; if (isValid && (length > 4) && (length < 20)) $("#username").addClass("valid"); else $("#username").addClass("invalid"); }); });

Answer 3

您可以使用onchange事件。它发生在元素的值已更改时。对于单选按钮和复选框，更改选中状态时会发生onchange事件。您只需在更改元素时调用脚本函数。

以下是一个例子：（html）

<input type="text" name="username" pattern="[A-Za-z0-9\w]{4,20}" onchange="validateuser()">

jquery用户名验证无效

3 个答案: