获得“;this.is不是函数“;错误

Getting a "this.is is not a function" error

本文关键字：函数 错误 is this 获得      更新时间：2024-02-18

我正在为我的新网站创建一个"注册"表单，但jQuery/JS函数出现了问题，该函数本应检查是否满足某些条件。

$(function checkform() {
if (this.is("#username")) {
var validchars = /^[a-zA-Z0-9's]+$/;
var nameHasError;
if (this.val().length < 6 && this.val().length > 26) {
  nameHasError = true;
  this.parent("div").addClass("has-error");
} else if (!(validchars.test(this).val())) {
  nameHasError = true;
  this.parent("div").addClass("has-error");
} else {
  nameHasError = false;
  this.parent("div").removeClass("has-error");
};
} else if (this.is("#password")) {
var passHasError;
if (this.val().length < 5 && this.val().length > 45) {
  passHasError = true;
  this.parent("div").addClass("has-error");
} else {
  passHasError = false;
  this.parent("div").removeClass("has-error");
};
};
});

这是带有HTML的JSFiddle部分（我在我的网站上使用引导程序，但更喜欢在fiddle上设置一个特定的类）

向致以最良好的问候

您将普通javascript与jquery语法混合在一起。this.is('#username')不是javascript。

使用this.id == "username"（vanilla-js）代替

或

$(this).is('#username')（jquery）

注意函数

中的作用域

代码中存在多个问题

  • 您已经在$()中定义了checkForm，因此该函数将仅在dom就绪处理程序中可用，因此您的onkeypress将抛出错误
  • 当dom就绪处理程序调用函数时，this将是没有is函数的文档对象
  • 字符大小验证应使用||而不是&&

因此，ti最好使用jQuery事件处理程序，因为这两个字段都有自己的验证功能，比如

jQuery(function($) {
  $('#username').on('keypress', function() {
    var validchars = /^[a-zA-Z0-9's]+$/;
    var nameHasError = false;
    var $this = $(this),
      value = this.value;
    if (value.length < 6 || value.length > 26) {
      nameHasError = true;
    } else if (!validchars.test(value)) {
      nameHasError = true;
    };
    $this.parent("div").toggleClass("has-error", nameHasError);
  });
  $('#password').on('keypress', function() {
    var passHasError = false;
    var $this = $(this),
      value = this.value;
    if (value.length < 5 || value.length > 45) {
      passHasError = true;
    };
    $this.parent("div").toggleClass("has-error", passHasError);
  });
});
.has-error {
  background-color: red;
}
.has-success {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" placeholder="Between 6 and 26 characters">
    <span id="unameError"></span>
  </div>
  <br/>
  <div class="">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
    <span id="passError"></span>
  </div>
</div>

function checkform() {
  if ($(this).is("#username")) {
    var validchars = /^[a-zA-Z0-9's]+$/;
    var nameHasError;
    if ($(this).val().length < 6 || $(this).val().length > 26) {
      nameHasError = true;
      $(this).parent("div").addClass("has-error");
    } else if (!(validchars.test($(this).val()))) {
      nameHasError = true;
      $(this).parent("div").addClass("has-error");
    } else {
      nameHasError = false;
      $(this).parent("div").removeClass("has-error");
    };
  } else if ($(this).is("#password")) {
    var passHasError;
    if ($(this).val().length < 5 || $(this).val().length > 45) {
      passHasError = true;
      $(this).parent("div").addClass("has-error");
    } else {
      passHasError = false;
      $(this).parent("div").removeClass("has-error");
    };
  };
}
$(function () {
	$('input').on('keyup', checkform);
})
.has-error {
  background-color: red;
}
.has-success {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" placeholder="Between 6 and 26 characters">
    <span id="unameError"></span>
  </div>
  <br/>
  <div class="">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password"  placeholder="Password">
    <span id="passError"></span>
  </div>
</div>

相关文章：