jQuery验证不与PHP和on.Keyup()事件一起使用

Question

我正在使用 jQuery验证，但是我面临on.keyUp()事件的问题。

请查看我的代码，告诉我我做错了什么。
这是我的jQuery代码，还包含一些特定路径的PHP。

编辑：使用＃。在行$（"＃usernametxt"）。键（function（）

）

<input type="text" id="usernametxt">
<div id="ex_username"></div>
<script>
  $(document).ready(function(){
    $("#usernametxt").keyup(function(){
      var user_name = $(this).val();
      var regex ='/^[a-z0-9_]{4,15}$/';
      var regex2='/^[a-z0-9_]{1,15}$/';
      
      if(user_name.length==0)
      {
        $("#ex_username").html("");
      }
      else if(user_name.length>15)
      {
        $("#ex_username").html("<img height='17px' style='margin-bottom:-3px;' width='17px' src='<?=base_url()?>assets/images/sign-warning-icon.png'> User Name Too Long.");
      }
      else if(user_name.length<4)
      {
        if(regex2.test(user_name) != true && user_name.length<4)
        {
          $("#ex_username").html("<img height='17px' style='margin-bottom:-3px;' width='17px' src='<?=base_url()?>assets/images/sign-warning-icon.png'> Only _ (Underscore) allowed.);
        }
        else
        {
          $("#ex_username").html("<img height='17px' style='margin-bottom:-3px;' width='17px' src='<?=base_url()?>assets/images/sign-warning-icon.png'> User Name Too Short.");
        }
      }
      else if(regex2.test(user_name) != true && user_name.length>=4)
      {
        $("#ex_username").html("<img height='17px' style='margin-bottom:-3px;' width='17px' src='<?=base_url()?>assets/images/sign-warning-icon.png'> Only _ (Underscore) allowed.");
      }
      else if(regex.test(user_name))
      {
        $.ajax({
          type: "POST",
          url: "existing_username",
          data:'user_name='+$(this).val(),
          success: function(data){
            $("#ex_username").html(data);
          }
        });
      }
      else
      {
        $("#ex_username").html("<img height='17px' style='margin-bottom:-3px;' width='17px' src='<?=base_url()?>assets/images/sign-check-icon.png'> Invalid username.");
      }
    });
  });
</script>

Answer 1

尝试更改以下行：

$(".usernametxt").keyup(function(){

对于此行：

$("#usernametxt").keyup(function(){

请参阅，当您将" ID"属性放在标签中时，使用"＃"而"代替"。（这用于识别特定类。

Answer 2

在使用jQuery事件之前，请确保已包含jQuery库。首先在顶部包含jQuery库，然后使用您的代码

inclldue之后cdn jQuery库链接

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

然后写下您的jQuery验证代码：

<script>
     $(document).ready(function(){
         $("#usernametxt").keyup(function(){
             /*write your logic here*/
         });
     });
</script>

Answer 3

您使用.而不是#，如Ramones所述，您应该针对id。

但是您也错过了"，以关闭第一个Only _ (Underscore) allowed.);

之后的字符串

那么，您的正则表达式不得用'包裹。这些不是弦。

最后，您应该在功能开始时清除验证消息（并隐藏图像）。如果没有错误，这将确保没有消息。

如何自己调试所有这些？使用控制台。至少，您将有一条错误消息（并非总是清除tho。）和发生的行号。

这是一个代码蛋白。验证消息由于缺失的图像而被"跳跃"。