当用户不遵守规则时，如何获取我的跨度ID以显示适当的消息？

Question

我目前在根据用户是否未遵循我的验证规则的情况下为某些相同的输入texbox显示不同的跨度错误消息时遇到问题。 我真的可以使用一些建议，说明如何更好地执行一些if语句，以强制执行我设置的规则。 我对我的if语句如何验证用户名以及if语句如何验证密码感到满意，但我一直在努力尝试找出验证我的repeatemail文本框和emailaddress文本框的最佳方法。 有人能帮我吗？ 提前致谢！ 这是我的HTML，CSS和JavaScript / JQuery代码

  $('#button2').on('click', function () { var NewUsernameError = document.getElementById("New_Username_error"); var NewPasswordError = document.getElementById("New_Password_error"); var NewEmailAddressError = document.getElementById("New_Email_error"); // var NewRepeatEmailAddressError=document.getElementById("NewReenter_Email_error"); // How can I get my span id's to display one of two different error //messages based on my rules below? Right now it will only display first error //messages. Do I need to create two different span ids (except for the password // texbox) for each input textbox or is one span id fine how I currently have //it? Shouldn't I be able to display either message just using one span id? if($(".newUsername").val().length < 6) { NewUsernameError.innerHTML= "The username must be at least 6 characters"; // NewUsernameError.innerHTML= "There is an already existing account with username"; }else { NewUsernameError2.innerHTML = ''; } if($(".newPassword").val().length < 6) { { NewPasswordError.innerHTML= "The password must be at least 6 characters"; }else{ NewPasswordError.innerHTML = ''; } if($(".newEmail")== "" && $(".newEmail") != /^[a-zA-Z0-9]@[a-zA-Z])+.[az]) { NewEmailAddressError.innerHTML= "The email must not be left empty."; NewEmailAddressError.innerHTML= "The email must contain @ symbol in it."; }else{ NewEmailAddressError.innerHTML= ''; } if($(".repeatEmail").value != $(".newEmail").value && $(".repeatEmail") == ""){ NewRepeatEmailAddressError.innerHTML= "This repeat email doesn't equal to the first one entered."; NewRepeatEmailAddressError.innerHTML= "This repeat email must not be blank."; }else{ NewRepeatEmailAddressError.innerHTML= ''; } 

。

Answer 1

这里有很多问题。

if($(".newEmail")== ""  && $(".newEmail") != /^[a-zA-Z0-9]@[a-zA-Z])+.[a-z])

尝试比较<input>元素而不是其内容。

if($(".repeatEmail").value != $(".newEmail").value && $(".repeatEmail") == ""){ 

试图比较undefined而不是表单元素的内容。 （jQuery不使用.value 。）

相反，您需要.val() ：

if($(".newEmail").val() == ""  && $(".newEmail").val() != /^[a-zA-Z0-9]@[a-zA-Z])+.[a-z])
...
if($(".repeatEmail").val() != $(".newEmail").val() && $(".repeatEmail").val() == ""){ 

第二个问题是您尝试同时分配两个错误消息：

 NewRepeatEmailAddressError.innerHTML= "This repeat email doesn't equal to the first one entered."; 
 NewRepeatEmailAddressError.innerHTML= "This repeat email must not be blank."; 

在这些情况下，第二个.innerHTML将立即覆盖第一个.innerHTML ，因此将永远不会看到第一个错误消息。 这些错误中的每一个都必须单独if {} ， if {}条件。

第三，这不是进行正则表达式比较的方法，该正则表达式包含多个语法错误（没有斜杠，括号不匹配），即使它起作用，也将禁止许多有效的电子邮件地址：

$(".newEmail") != /^[a-zA-Z0-9]@[a-zA-Z])+.[a-z])

更好的电子邮件地址验证正则表达式可以在例如此问题中找到，但即使是那些也可能不允许某些有效地址。 保持简单，仅测试错误消息声称您正在测试的内容（@符号的存在）：

/@/.test($('.newEmail').val())

放在一起

清理您的原始函数，将所有原始js都转换为jQuery（混合它们并没有真正的缺点，除了它会使代码更难阅读，但我认为您是否已经有了jQuery也可以使用它），然后重新排列一些简化代码的逻辑导致：

 var validate=function() { // clear out the error display ahead of time: var newUsernameError = $("#New_Username_error").html(''); var newPasswordError = $("#New_Password_error").html(''); var newEmailAddressError = $("#New_Email_error").html(''); var newRepeatEmailAddressError = $("#Repeat_Email_error").html(''); // just to make the later conditions easier to read, let's grab all the values into vars: var newUsername = $('.newUsername').val(); var newPassword = $('.newPassword').val(); var newEmail = $('.newEmail').val(); var repeatEmail = $('.repeatEmail').val(); // presumably you'll want to prevent form submit if there are errors, so let's track that: var errorsFound = false; if (newUsername === "") { errorsFound = true; newUsernameError.html("The username must not be empty."); } else if (newUsername.length < 6) { errorsFound = true; newUsernameError.html("The username must be at least 6 characters."); } if (newPassword.length < 6) { errorsFound = true; newPasswordError.html("The password must be at least 6 characters."); } if (newEmail === "") { errorsFound = true; newEmailAddressError.html("The email must not be left empty."); } else if (!/@/.test(newEmail)) { errorsFound = true; newEmailAddressError.html("The email must contain an @ symbol."); } if (repeatEmail !== newEmail) { errorsFound = true; newRepeatEmailAddressError.html("This repeat email doesn't equal to the first one entered."); } // No need to test for repeatEmail being empty, since that's already covered by the newEmail case above. // OK, all conditions checked, now: if (errorsFound) { // prevent form submit. (If this is called in an onsubmit handler, just return false.) } else { // allow form submit. } console.log("Errors found: ", errorsFound); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> Username: <input class="newUsername"> <div id="New_Username_error"></div> Password: <input class="newPassword"> <div id="New_Password_error"></div> newEmail: <input class="newEmail"> <div id="New_Email_error"></div> repeatEmail: <input class="repeatEmail"> <div id="Repeat_Email_error"></div> </form> <button onclick="validate()">Validate</button> 

Answer 2

请保留一个容器，以防输入时可能遇到的错误。 我会做这样的事情，以避免所有其他情况，否则

$('#button2').on('click', function () {

  // VALIDATE USERNAME
  var newUserErrStr = '';
  var newUsernameVal = $(".newUsername").val();

  if(newUsernameVal.length < 6) newUserErrStr += "The username must be at least 6 characters";
  document.getElementById("New_Username_error").innerHTML = newUserErrStr;


  // VALIDATE PASSWORD
  var newPasswordErrStr = '';
  var newPasswordVal = $(".newPassword").val();

  if(newPasswordVal.length < 6) newPasswordErrStr += "The password must be at least 6 characters";
  document.getElementById("New_Password_error").innerHTML = newPasswordErrStr;


  // VALIDATE EMAIL
  var newEmailErrStr = '';
  var newEmailVal = $(".newEmail").val();

  if (newEmailVal === "") newEmailErrStr += "The email must not be left empty<br/>";
  if (newEmailVal !== /^[a-zA-Z0-9]@[a-zA-Z])+.[a-z]/ ) newEmailErrStr += "The email must contain @ symbol in it.";

  document.getElementById("New_Email_error").innerHTML = newEmailErrStr;

});