Question

我正在为我的新网站创建一个“注册”表单，但是遇到了一个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（我在我的网站上使用bootstrap，但更喜欢在小提琴上设置一个特定的类）

祝你好运

Answer 1

您正在使用jquery语法混合使用vanilla javascript。 this.is('#username')不是javascript。

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

OR

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

注意功能中的范围

Answer 2

代码中存在多个问题

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

因此，最好使用jQuery事件处理程序，这两个字段都有自己的验证函数，如

＆＃13;

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);
  });
});

＆＃13;

.has-error {
  background-color: red;
}
.has-success {
  background-color: green;
}

＆＃13;

<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>

＆＃13;

Answer 3

＆＃13;

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);
})

＆＃13;

.has-error {
  background-color: red;
}

.has-success {
  background-color: green;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: