Question

我正在尝试创建一个用于学习/锻炼的网站，但我坚持进行用户注册验证。没有错误消息，什么也没发生。

我也尝试过：

if(user_name.length < 3 && user_name!=="")

和

if(user_name.length < 3)

代码段：

var user_name = $('#username').val();

$('#username').on('keyup',function(){
  if(user_name.length < 3 && user_name!=""){
    $('#username-info').html('Username must be at least 3 characters.');
  }
  else if(user_name.length > 3){
    $('#username_info').html('No problem');
  }
});

#username-info {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="username">
<p id="username-info"></p>

Answer 1

当前，user_name在脚本开始时被声明一次，因此它将永远不会被更新。

然后，您在keyup而不是<p#username-info>上附加了<input#username>事件处理程序，因此当您在其中输入内容时，不会触发任何操作。

因此，您需要将每次输入的user_name更新到<input#username>。

// Here, you need to attach the event handler of #username, not #username-info.
$('#username').on('keyup', function() {
  // And here, you get the value of your input.
  let user_name = $('#username').val();
  // let user_name = $(this).val(); works too.

  // Writing "(user_name)" in a condition is the same as "(user_name !== '')".
  if (user_name && user_name.length < 3) {
    $('#username-info').html('Username must be at least 3 characters.');
  } else if (user_name.length >= 3) {
    // You wrote "#username_info" instead of "#username-info" here.
    $('#username-info').html('No problem');
  }
});

#username-info {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="username">
<p id="username-info">
</p>

Answer 2

我认为您输入的ID错误，并且变量user_name在启动时仅初始化一次，因此其值始终为空。

$('#username').on('keyup', function() {
  var user_name = $(this).val();
  if (user_name.length < 3 && user_name != "") {
    $('#username-info').html('Username must be at least 3 characters.');
  } else if (user_name.length > 3) {
    $('#username-info').html('No problem');
  }
});

#username-info {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="username">
<p id="username-info">
</p>

Answer 3

您的脚本中有很多错别字，并且您在键盘上查找段落而不是输入字段。

var user_name = "";
$('#username').on('keyup',function(){
   user_name = $('#username').val();

  if(user_name.length <= 3 && user_name!=""){
    $('#username-info').html('Username must be at least 3 characters.');
  }
  else if(user_name.length > 3){
    $('#username-info').html('No problem');
  }
});

Answer 4

keyup函数需要在输入字段上触发。

keyup函数将更新username（否则将保持不变）。

$('#username').on('keyup',function(){
    var user_name = $('#username').val();
  if(user_name.length < 3 && user_name!=""){
    $('#username-info').html('Username must be at least 3 characters.');
  }
  else if(user_name.length >= 3){
    $('#username-info').html('No problem');
  }
});

Answer 5

我将您的代码用作参考，并对其进行了一些更改以获得更好的输出。

您可以尝试一下，在这里我也正在更改错误代码的颜色代码，以便您获得更好的结果。

$('#username').on('keyup',function(){
    var user_name = $('#username').val();
	if(user_name.length < 3 && user_name != ""){
	    $('#username-info').html('Username must be at least 3 characters.');
		$('#username-info').addClass('username-info');
		$('#username-info').removeClass('username-info-2');
	}
	else if(user_name.length >= 3){
		$('#username-info').html('No problem');
		$('#username-info').addClass('username-info-2');
		$('#username-info').removeClass('username-info');
	}
});

.username-info {
  color: red;
  }
.username-info-2 {
  color: blue;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="username">

<p id="username-info"></p>

使用jQuery进行用户注册表单验证

5 个答案: