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

谢谢

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

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

运行下面的代码片段以检查所有验证是否按预期运行良好。

$(document).ready(function() {
//RegEx
var fullnameregex = /^([a-zA-Z-_ ’'‘ÆÐƎƏƐƔĲŊŒẞÞǷȜæðǝəɛɣĳŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊĲĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịĳĵķƙĸĺļłľŀŉń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>

在 AlwaysHelping 的帮助下。

我在 Javascript 端进行了一些不需要数据库连接的验证，PHP 和我在.keyup函数中分别处理了每个验证，因此只有实际交互的输入才会给出验证错误，并在单个 Ajax 调用中解决了其他需要 Ajax 的验证。

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

相关内容

最新更新

热门标签：