Javascript 无法使用oop js获取输入值

您好，我正在尝试使用oop js从表单输入获取输入值

当我得到用户名时，我想验证它，但是我不能得到用户名的值

当我输入console.log（用户名）时；我要么得到未定义的，要么得到html标记，而不是值。我做错了什么

我的表格

<form action="" method="post">
    <input type="text" name="username" id="username">
</form>

还有我的js

<script type="text/javascript">
validateForm = {

    username : $.trim($('#username').val().toUpperCase().replace(/\s+/g, '')),

    checkUsernameValid : function() {
        $('#username').on('keyup change', function() {
            console.log(this.username);
            if (/^[a-zA-Z0-9]*$/.test(this.username) == false) {
                alert('bad')
            } else {
                alert('good');
            }
        });
    }
};

validateForm.checkUsernameValid();
</script>

validateForm={
用户名：$.trim（$（'#username'）.val（）.toUpperCase（）.replace（/\s+/g'，），
checkUsernameValid:function（）{
$（'#username'）。在（'keyup change'，function（）上{
console.log（this.username）；
如果（/^[a-zA-Z0-9]*$/.test（this.username）==false）{
警报（‘坏’）
}否则{
警惕（“良好”）；
}
});
}
};
validateForm.checkUsernameValid（）；

调用

this.username=$.trim（$（'#username'）.val（）.toUpperCase（）.replace（/\s+/g'））

或

this.username=$（'#username'）.val（）

在

键控事件中设置值


validateForm={
用户名：$.trim（$（'#username'）.val（）.toUpperCase（）.replace（/\s+/g'，），
checkUsernameValid:function（）{
$（'#username'）。在（'keyup change'，function（）上{
this.username=$.trim（$（'#username'）.val（）.toUpperCase（）.replace（/\s+/g'））；
console.log（this.username）；
如果（/^[a-zA-Z0-9]*$/.test（this.username）==false）{
//警报（‘坏’）
}否则{
//警惕（“良好”）；
}
});
}
};
validateForm.checkUsernameValid（）
调用
this.username=$.trim（$（'#username'）.val（）.toUpperCase（）.replace（/\s+/g'））
或
this.username=$（'#username'）.val（）
在
键控事件中设置值


validateForm={
用户名：$.trim（$（'#username'）.val（）.toUpperCase（）.replace（/\s+/g'，），
checkUsernameValid:function（）{
$（'#username'）。在（'keyup change'，function（）上{
this.username=$.trim（$（'#username'）.val（）.toUpperCase（）.replace（/\s+/g'））；
console.log（this.username）；
如果（/^[a-zA-Z0-9]*$/.test（this.username）==false）{
//警报（‘坏’）
}否则{
//警惕（“良好”）；
}
});
}
};
validateForm.checkUsernameValid（）


我要么得到未定义的，要么得到html标记，而不是值

由于您已经设置了name和id属性，所以它在全局范围内作为一个整体是可用的，所以html元素会登录到控制台中

您不应该以这种方式绑定方法中的事件。您可以在绑定事件中调用该方法，并使该方法接受该值作为参数，例如：


validateForm={
用户名：$.trim（$（'#username'）.val（）.toUpperCase（）.replace（/\s+/g'，），
checkUsernameValid:function（value）{//2.获取值
this.username=value；//3.设置值
如果（/^[a-zA-Z0-9]*$/.test（this.username）==false）{
console.log（'bad'）
}否则{
console.log（'good'）；
}
}
};
$（'#username'）。在（'keyup change'，function（）上{
validateForm.checkUsernameValid（this.value）；//1.传递输入值
});


我要么得到未定义的，要么得到html标记，而不是值

由于您已经设置了name和id属性，所以它在全局范围内作为一个整体是可用的，所以html元素会登录到控制台中

您不应该以这种方式绑定方法中的事件。您可以在绑定事件中调用该方法，并使该方法接受该值作为参数，例如：


validateForm={
用户名：$.trim（$（'#username'）.val（）.toUpperCase（）.replace（/\s+/g'，），
checkUsernameValid:function（value）{//2.获取值
this.username=value；//3.设置值
如果（/^[a-zA-Z0-9]*$/.test（this.username）==false）{
console.log（'bad'）
}否则{
console.log（'good'）；
}
}
};
$（'#username'）。在（'keyup change'，function（）上{
validateForm.checkUsernameValid（this.value）；//1.传递输入值
});

如果我用这种方式定义用户名，我还可以在另一种方法中再次使用它吗？我会说是的，只要调用
validateForm.username
就可以返回值，如果已经设置的话。所以我确实可以先将用户名设置为username:''，或者username:null，因为我会在我的方法中重新定义它吗？如果我这样定义用户名，我还可以在另一个方法中再次使用它吗？我会说是的，只要调用
validateForm.username
，如果已经设置，它应该会返回值。所以我确实可以先设置用户名，比如username:''，或者username:null，因为我会在我的方法中重新定义它？我真的很喜欢这个答案，但是我得到了一个TypeError:$（…）。如果我使用它，val（…）是未定义的错误。知道为什么吗？这可能是因为没有将其包装在docready中，因为如果在目标dom元素之前包含脚本，则选择器将不可用。另一个选项是在正文结束时移动脚本块。我非常喜欢这个答案，但是我得到一个TypeError:$（…）。如果我使用它，val（…）是未定义的错误。知道为什么吗？这可能是因为没有将其包装在docready中，因为如果在目标dom元素之前包含脚本，则选择器将不可用。另一个选项是在正文结束时移动脚本块。