无法使用oop js获取输入的值答案

【问题标题】：cant get the value of input with oop js无法使用oop js获取输入的值
【发布时间】：2017-02-21 06:40:52
【问题描述】：

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

当我获得用户名时，我想验证它，但我无法获得用户名的值。

当我 console.log(username);我要么得到 undefined 要么得到 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>

【问题讨论】：

标签： javascript jquery oop

【解决方案1】：

在您的keyup event 中调用this.username = $.trim($('#username').val().toUpperCase().replace(/\s+/g, '')); 或this.username = $('#username').val(); 来设置值

validateForm = {

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

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

validateForm.checkUsernameValid();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
    <input type="text" name="username" id="username">
</form>

【讨论】：

如果我以这种方式定义用户名，我还能在其他方法中再次使用它吗？
我会说是的，只要调用 validateForm.username 并且应该返回值，如果它已设置。
所以我真的可以一开始就设置用户名，比如用户名：''，或者用户名：null，因为无论如何我都会在我的方法中重新定义它？

【解决方案2】：

我得到 undefined 或 html 标记，而不是值。

由于您设置了 name 和 id 属性，因此它可以在全局范围内作为一个整体使用，因此 html 元素会登录到控制台。

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

validateForm = {
  username: $.trim($('#username').val().toUpperCase().replace(/\s+/g, '')),
  checkUsernameValid: function(value) { // 2. get the value
    this.username = value; // 3. set the value
    if (/^[a-zA-Z0-9]*$/.test(this.username) == false) {
      console.log('bad')
    } else {
      console.log('good');
    }
  }
};
$('#username').on('keyup change', function() {
  validateForm.checkUsernameValid(this.value); // 1. pass the input value
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
  <input type="text" name="username" id="username">
</form>

【讨论】：

我真的很喜欢这个答案，但是我得到一个 TypeError: $(...).val(...) is undefined 错误，如果我使用它。任何想法为什么？
这可能是由于没有将其包装在 doc ready 中，因为如果在目标 dom 元素之前包含脚本，则选择器将不可用。另一种选择是在正文结束时移动脚本块。