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

Question

我正在尝试创建一个学习/运动的网站，但我坚持用户注册验证。 没有错误消息，没有任何反应。

这是一个JsFiddle链接 。

我也尝试过：

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在脚本开头声明一次，因此永远不会更新。

然后，您在<p#username-info>上附加了一个keyup事件处理程序，而不是<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>