时间戳

首页 > 解决方案 > 在 Ajax 中如何显示对用户交互的输入的验证？

javascript - 在 Ajax 中如何显示对用户交互的输入的验证？

问题描述

在 Ajax 中，我只想展示对用户交互的输入的验证。不是显示所有验证。在我的脚本中，如果您向任何输入写入任何内容，您将同时获得所有输入验证。它显示所有验证。

我的意思是，如果你在全名输入中写 3，那么验证会说：“全名必须是字母数字”，但同时也显示用户名、电子邮件和密码验证。它显示了所有的验证。我试图阻止这件事，但无法抓住合乎逻辑的愿景。我怎样才能做到这一点？

<script type="text/javascript">
    $(document).ready(function() {

        $("#register-form").keyup(function(event) {

            event.preventDefault();

            var fullname = $("#fullname").val();
            var username = $("#username").val();
            var email = $("#email").val();
            var password = $("#password").val();
            
            $.ajax({
                type: "POST",
                url: "registercontrol.php",
                data: {
                    fullname: fullname,
                    username: username,
                    email: email,
                    password: password
                },
                dataType: "json",
                success: function(result) {
                    
                    $('.hidden').show();
                    $('#result').html(result);

                    $("#vfullname").html("");
                    $("#fullname").removeClass();
                    $("#fullname").addClass("form-control form-control-user border-success");

                    $("#vusername").html("");
                    $("#username").removeClass();
                    $("#username").addClass("form-control form-control-user border-success");

                    $("#vemail").html("");
                    $("#email").removeClass();
                    $("#email").addClass("form-control form-control-user border-success");

                    $("#vpassword").html("");
                    $("#password").removeClass();
                    $("#password").addClass("form-control form-control-user border-success");

                    if (result.fni) {
                        $("#vfullname").html(result['fni']);
                        $("#vfullname").removeClass();
                        $("#vfullname").addClass("text-info");
                        $("#fullname").removeClass();
                        $("#fullname").addClass("form-control form-control-user border-info");
                    }
                    if (result.fnw) {
                        $("#vfullname").html(result['fnw']);
                        $("#vfullname").removeClass();
                        $("#vfullname").addClass("text-warning");
                        $("#fullname").removeClass();
                        $("#fullname").addClass("form-control form-control-user border-warning");
                    }
                    
                    if (result.uni) {
                        $("#vusername").html(result['uni']);
                        $("#vusername").removeClass();                      
                        $("#vusername").addClass("text-info");
                        $("#username").removeClass();
                        $("#username").addClass("form-control form-control-user border-info");
                    }
                    if (result.unw) {
                        $("#vusername").html(result['unw']);
                        $("#vusername").removeClass();                      
                        $("#vusername").addClass("text-warning");
                        $("#username").removeClass();
                        $("#username").addClass("form-control form-control-user border-warning");
                    } 
                    if (result.une) {
                        $("#vusername").html(result['une']);
                        $("#vusername").removeClass();                      
                        $("#vusername").addClass("text-danger");
                        $("#username").removeClass();
                        $("#username").addClass("form-control form-control-user border-danger");
                    }

                    if (result.mi) {
                        $("#vemail").html(result['mi']);
                        $("#vemail").removeClass();                     
                        $("#vemail").addClass("text-info");
                        $("#email").removeClass();
                        $("#email").addClass("form-control form-control-user border-info");
                    }
                    if (result.mw) {
                        $("#vemail").html(result['mw']);
                        $("#vemail").removeClass();                     
                        $("#vemail").addClass("text-warning");
                        $("#email").removeClass();
                        $("#email").addClass("form-control form-control-user border-warning");
                    }
                    if (result.me) {
                        $("#vemail").html(result['me']);
                        $("#vemail").removeClass();                     
                        $("#vemail").addClass("text-danger");
                        $("#email").removeClass();
                        $("#email").addClass("form-control form-control-user border-danger");
                    }

                    if (result.pwi) {
                        $("#vpassword").html(result['pwi']);
                        $("#vpassword").removeClass();                      
                        $("#vpassword").addClass("text-info");
                        $("#password").removeClass();
                        $("#password").addClass("form-control form-control-user border-info");
                    } 
                    if (result.pww) {
                        $("#vpassword").html(result['pww']);
                        $("#vpassword").removeClass();                      
                        $("#vpassword").addClass("text-warning");
                        $("#password").removeClass();
                        $("#password").addClass("form-control form-control-user border-warning");
                    }                            
                }
            });         
        });
    });
</script>

谢谢

标签： javascriptjqueryajax

解决方案

this这是通过使用和使用.attr而不是执行多个功能来为您提供更简单的答案，keyup我只做一个并使用if条件来匹配.attr我正在输入的输入。

我还.validate_input为所有输入分配了唯一的类以对其执行keyup功能，然后我通过此检查.attr以获取键入的输入.val()

运行下面的代码片段以检查所有验证是否如您所愿。

$(document).ready(function() {

  //RegEx
  var fullnameregex = /^([a-zA-Z\-_ ’'‘ÆÐƎƏƐƔIJŊŒẞÞǷȜæðǝəɛɣijŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊIJĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịijĵķƙĸĺļłľŀʼnńn̈ňñņŋóòôöǒŏōõőọøǿơœŔŘŖŚŜŠŞȘṢẞŤŢṬŦÞÚÙÛÜǓŬŪŨŰŮŲỤƯẂẀŴẄǷÝỲŶŸȲỸƳŹŻŽẒŕřŗſśŝšşșṣßťţṭŧþúùûüǔŭūũűůųụưẃẁŵẅƿýỳŷÿȳỹƴźżžẓ]+)$/;
  var usernameregex = /^[a-z0-9_-]{3,16}$/;
  var emailregex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  var passwordregex = /^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/;

  //Input Validations
  $('.validate_inputs').keyup(function(event) {
    event.preventDefault();
    if ($(this).attr('id') == 'fullname') {
      if (!fullnameregex.test($(this).val())) {
        $("#vfullname").html("Please enter a valid name.");
        $("#vfullname").removeClass();
        $("#vfullname").addClass("text-info");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-info");
      } else {
        $("#vfullname").html("");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-success");
      }
    } else if ($(this).attr('id') == 'username') {
      if (!usernameregex.test($(this).val())) {
        $("#vusername").html("Please enter a valid username.");
        $("#vusername").removeClass();
        $("#vusername").addClass("text-info");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-info");
      } else {
        $("#vusername").html("");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-success");
      }
    } else if ($(this).attr('id') == 'email') {
      if (!emailregex.test($(this).val())) {
        $("#vemail").html("Please enter a valid email");
        $("#vemail").removeClass();
        $("#vemail").addClass("text-info");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-info");
      } else {
        $("#vemail").html("");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-success");
      }
    } else if ($(this).attr('id') == 'password') {
      if (!passwordregex.test($(this).val())) {
        $("#vpassword").html("The password must contain at least one upper and lower case character, a number and a special character.");
        $("#vpassword").removeClass();
        $("#vpassword").addClass("text-info");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-info");
      } else {
        $("#vpassword").html("");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-success");
      }
    }
  });


  //Ajax Validations
  $("#register-form").keyup(function(event) {

    event.preventDefault();

    var fullname = $("#fullname").val();
    var username = $("#username").val();
    var email = $("#email").val();
    var password = $('#password').val();

    $.ajax({
      type: "POST",
      url: "registercontrol.php",
      data: {
        fullname: fullname,
        username: username,
        email: email,
        password: password
      },
      dataType: "json",
      success: function(result) {

        if (result.une) {
          $("#vusername").html(result['une']);
          $("#vusername").removeClass();
          $("#vusername").addClass("text-danger");
          $("#username").removeClass();
          $("#username").addClass("form-control form-control-user border-danger");
        }

        if (result.me) {
          $("#vemail").html(result['me']);
          $("#vemail").removeClass();
          $("#vemail").addClass("text-danger");
          $("#email").removeClass();
          $("#email").addClass("form-control form-control-user border-danger");
        }
      }
    });
  });

});
input {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  Name <input type="text" class="validate_inputs" id="fullname" />
  <div id="vfullname"></div>
  Username <input type="text" class="validate_inputs" id="username" />
  <div id="vusername"></div>
  Email <input type="text" class="validate_inputs" id="email" />
  <div id="vemail"></div>
  Password <input type="email" class="validate_inputs" id="password" />
  <div id="vpassword"></div>

  <button id="register-form">Submit</button>


</div>

推荐阅读