Question

我从网上获取了一些代码来验证名字。它可行，但是我想进行一些调整。我希望该错误消息在字段为空时消失。另外，我想为文本添加边距，因为它与下一个字段不均匀，但似乎无法使其正常工作。

这是Java语言的标记。这将使用引导程序和下面包含的另一个样式表。

$(document).ready(function () {
  var $regexname = /^([a-zA-Z]{2,16})$/;
  $('.name').on('keypress keydown keyup', function () {
    if (!$(this).val().match($regexname)) {
      // there is a mismatch, hence show the error message
      $('.emsg').removeClass('hidden');
    } else {
      // else, do not display message
      $('.emsg').addClass('hidden');
    }
  });
});

.signup2container-stage1 {
  width: 88%;
  margin: auto;
}

#signupsectioncontainer-stage2 {
  float: left;
  width: 45%;
  height: 2000px;
  background-color: orange;
  margin-top: 20px;
}

#signupsectioncontainer-stage3 {
  width: 80%;
  height: 90%;
  background-color: #ffffff;
  margin: auto;
}

#signup2validationinputs input {
  width: 100%;
  height: 45px;
  margin: 10px 0px 10px 0px;
}

.signuptextinputsstyle1 {
  outline-width: 0;
  background-color: #e3e5e8;
  border: none;
  padding: 10px 10px 10px 10px;
  float: left;
  display: block;
}

#signup2submitbutton {
  width: 100%;
  margin-top: 10px;
  padding: 20px 10px 20px 10px;
  border: none;
  outline-width: 0;
  color: #ffffff;
  background-color: #4caf50;
}

#signup2submitbutton #signup2submitbutton:hover {
  background-color: #48a44d;
}

.emsg {
  color: red;
}

.hidden {
  visibility: hidden;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clear">
</div>
<div class="signup2container-stage1">
  <div id="signupsectioncontainer-stage2">
    <h1 id="signup2title">Sign Up</h1>
    <div id="signupsectioncontainer-stage3">
      <div id="signup2validationinputs">
        <input class="name signuptextinputsstyle1" type="text" placeholder="First Name" required/>
        <p>
          <span id="validname" class="emsg hidden">Please Enter a Valid Name</span>
        </p>
        <input class="signuptextinputsstyle1" type="text" name="" placeholder="Last Name">
        <input class="signuptextinputsstyle1" type="text" name="" placeholder="Choose a Username">
        <input class="signuptextinputsstyle1" type="text" name="" placeholder="Date Of Birth">
        <input class="signuptextinputsstyle1" type="text" name="" placeholder="Email">
        <input class="signuptextinputsstyle1" type="password" name="" placeholder="Create Password">
        <input class="signuptextinputsstyle1" type="password" name="" placeholder="Confirm Password">
        <button id="signup2submitbutton">SIGN UP</button>
      </div>
    </div>
  </div>
</div>

在此先感谢您的帮助，并为混乱的代码致歉。

Answer 1

使用jquery .change函数并检查该值是否为空。

$(".name").change(function {
     if (!$this.val()) {
         $(".emsg").addClass("hidden")
    }
})

希望这会有所帮助。

Answer 2

您应该检查名字输入的长度（如果为0），然后隐藏错误消息；否则，如果输入的值与正则表达式不匹配，则显示该错误消息。您应该同时使用jQuery的{{1}}事件，而不是同时使用input，keypress和keyup。

通过使用keydown警报类，您可以通过将消息BootStrap标记更改为span标记并为其指定一个p类来实现所需的设计监狱并删除class="alert alert-danger"类，并给emsg标记一个p以供以后由id="emsg"引用，并在第一个规则上删除JavaScript规则名称float标签。

这是一个可运行的代码段，用于说明所有所说的内容。

input

$(document).ready(function () {
  var $regexname = /^([a-zA-Z]{2,16})$/,
      msg = $('#emsg'),
      name = $('.name');
  name.on('input', function () {
    var val = $(this).val();
    if(val.length === 0) {
      msg.addClass('hidden');
    } else if (!val.match($regexname)) {
      // there is a mismatch, hence show the error message
      msg.removeClass('hidden');
    } else {
      // else, do not display message
      msg.addClass('hidden');
    }
  });
});

.signup2container-stage1 {
  width: 88%;
  margin: auto;
}

#signupsectioncontainer-stage2 {
  /* just for the demo purpose I removed the next two lines
  float: left;
  width: 45%; */
  height: 2000px;
  background-color: orange;
  margin-top: 20px;
}

#signupsectioncontainer-stage3 {
  width: 80%;
  height: 90%;
  background-color: #ffffff;
  margin: auto;
}

#signup2validationinputs input {
  width: 100%;
  height: 45px;
  margin: 10px 0px 10px 0px;
}

.signuptextinputsstyle1 {
  outline-width: 0;
  background-color: #e3e5e8;
  border: none;
  padding: 10px 10px 10px 10px;
  display: block;
}

#signup2submitbutton {
  width: 100%;
  margin-top: 10px;
  padding: 20px 10px 20px 10px;
  border: none;
  outline-width: 0;
  color: #ffffff;
  background-color: #4caf50;
}

#signup2submitbutton #signup2submitbutton:hover {
  background-color: #48a44d;
}

.emsg {
  color: red;
}

.hidden {
  display: none;
}

Ps：：建议您不要使用具有<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="clear"></div> <div class="signup2container-stage1"> <div id="signupsectioncontainer-stage2"> <h1 id="signup2title">Sign Up</h1> <div id="signupsectioncontainer-stage3"> <div id="signup2validationinputs"> <input class="name signuptextinputsstyle1" type="text" placeholder="First Name" required/> <p id="emsg" class="alert alert-danger hidden">Please Enter a Valid Name</p> <input class="signuptextinputsstyle1" type="text" name="" placeholder="Last Name"> <input class="signuptextinputsstyle1" type="text" name="" placeholder="Choose a Username"> <input class="signuptextinputsstyle1" type="text" name="" placeholder="Date Of Birth"> <input class="signuptextinputsstyle1" type="text" name="" placeholder="Email"> <input class="signuptextinputsstyle1" type="password" name="" placeholder="Create Password"> <input class="signuptextinputsstyle1" type="password" name="" placeholder="Confirm Password"> <button id="signup2submitbutton">SIGN UP</button> </div> </div> </div> </div>规则的类来隐藏/显示错误消息，而建议您删除该类并提供visibility: hidden;标签消息的p属性，然后使用display: none;对其进行动画处理或隐藏/显示，而无需使用动画，而无需使用任何类。即：jQuery

编辑：

您以前看到的间隙是由于msg.slideDown(400);规则不会从页面上删除元素（通过“删除”，我的意思是目视删除，该元素在这里并且可以重新出现）。因此，在visibility: hidden;类中，我将.hidden规则更改为visibility: hidden;。

希望我进一步推动了你。

Answer 3

我不确定您是否专门想要add或remove CSS类，但是您也可以设置默认情况下隐藏的错误消息（CSS或内联style属性）并仅显示如果有错误。所以你会喜欢

$(function() {
  var $regexname = /^([a-zA-Z]{2,16})$/;
  $('.name').on('keypress keydown keyup', function() {
    if ($(this).val().trim().length && !$(this).val().match($regexname)) {
      // there is a mismatch, hence show the error message
      $('.emsg').show();
    } else {
      $('.emsg').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div id="signupsectioncontainer-stage2">
  <h1 id="signup2title">Sign Up</h1>
  <div id="signupsectioncontainer-stage3">
    <div id="signup2validationinputs">
      <input class="name signuptextinputsstyle1" type="text" placeholder="First Name" required/>
      <p>
        <span id="validname" class="emsg" style="display:none;">Please Enter a Valid Name</span>
      </p>
      <input class="signuptextinputsstyle1" type="text" name="" placeholder="Last Name">
      <input class="signuptextinputsstyle1" type="text" name="" placeholder="Choose a Username">
      <input class="signuptextinputsstyle1" type="text" name="" placeholder="Date Of Birth">
      <input class="signuptextinputsstyle1" type="text" name="" placeholder="Email">
      <input class="signuptextinputsstyle1" type="password" name="" placeholder="Create Password">
      <input class="signuptextinputsstyle1" type="password" name="" placeholder="Confirm Password">
      <button id="signup2submitbutton">SIGN UP</button>
    </div>
  </div>
</div>

输入为空时，jQuery文本输入实时验证清除错误

3 个答案: