javascript - 如何使用 CSS 在 HTML 中的 span 旁边订购图标？

Question

我正在尝试对联系表单进行验证，例如，如果电子邮件不包含“@”和“。” 显示红色 X 图标，如果条件完成则显示绿色复选标记。我需要回答 2 个问题：1.如何对齐 span 旁边的图标和 2.如何将表单居中在屏幕中间？我尝试使用 display:flex、许多其他浮点数、位置、对齐以及我在互联网上找到的所有解决方案，但我在设置不同标签之间的图标并将表单居中在屏幕中间方面取得了任何成功，但只有一件事我来的是：链接

< script type = "text/javascript" >
  $(document).ready(function() {
    $('.submit').click(function(event) {
      console.log('Clicked button')
      var name = $('.name').val()
      var email = $('.email').val()
      var phone = $('.phone').val()
      var message = $('.message').val()
      var statusElm = $('.status')
      statusElm.empty()

      if (email.length > 5 && email.includes('@') && email.includes('.')) {
        statusElm.append('<i style="color: green; font-size:2.3em;" class="fas fa-check"></i>')
      } else {
        event.preventDefault()
        statusElm.append('<i style="color: red; font-size:2.3em;" class="fas fa-times"></i>')
      }

      if (phone.length > 7 && phone.legth < 14) {
        statusElm.append('<i style="color: green; font-size:2.3em;" class="fas fa-check"></i>')
      } else {
        event.preventDefault()
        statusElm.append('<i style="color: red; font-size:2.3em;" class="fas fa-times"></i>')
      }

      if (message.length > 20) {
        statusElm.append('<i style="color: green; font-size:2.3em;" class="fas fa-check"></i>')
      } else {
        event.preventDefault()
        statusElm.append('<i style="color: red; font-size:2.3em;" class="fas fa-times"></i>')
      }
    })
  }) <
  /script>

<div class="mail " id="mail">
  <div class="container">
    <h3 class="w3l_head w3l_head1">Contact Me</h3>
    <p class="w3ls_head_para w3ls_head_para1">send Me a message</p>
    <div class="w3_mail_grids">
      <form action="https://formspree.io/[e-mail]" method="POST" class="justify-content-center">
        <div class="col-md-6 w3_agile_mail_grid">
          <span class="input input--ichiro"><input
    							class="input__field input__field--ichiro" type="text" name="name"
    							id="input-25" placeholder=" " > 
    							<label class="input__label input__label--ichiro" for="input-25">
    								<span class="input__label-content input__label-content--ichiro">Your
    									Name</span>
          </label>
          </span>
          <a class="status" name="status"></a> <span class="input input--ichiro"> <input
    							class="input__field input__field--ichiro email" type="email" name="Email"
    							id="input-26" placeholder=" " > <label
    							class="input__label input__label--ichiro" for="input-26">
    								<span class="input__label-content input__label-content--ichiro">Your
    									Email</span>
          </label>
          </span> <span class="input input--ichiro"> <input
    							class="input__field input__field--ichiro phone" type="text" name="phone"
    							id="input-27" placeholder=" " > <label
    							class="input__label input__label--ichiro" for="input-27">
    								<span class="input__label-content input__label-content--ichiro">Your
    									Phone Number</span>
          </label>
          </span>

        </div>
        <div class="col-md-6 w3_agile_mail_grid">
          <textarea class="message" name="message" placeholder="Your Message"></textarea>
          <input type="submit" value="Submit" class="submit">
        </div>
        <div class="clearfix"></div>
      </form>
    </div>
  </div>
</div>

标签： javascripthtmlcss

Answer 1

页面上已经使用了 Bootstrap。因此，我建议您应用框架的验证功能，而不是创建自定义 CSS 规则。您可以在自定义验证方法中使用控件或约束验证 API.is-valid的样式。.is-invalid

以下示例将帮助您入门。我不想发布太多代码，因此我的表单包含一个控件。

document.getElementById('emailField')
  .addEventListener('input', function(e) {
    this.classList.remove('is-valid', 'is-invalid')
    if (!isValidEmail(this.value))
      this.classList.add('is-invalid');
    else
      this.classList.add('is-valid');
  }, false);

document.getElementById('myForm')
  .addEventListener('submit', function(e) {
    checkEmail(document.getElementById('emailField'));
    if (!this.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    this.classList.add('was-validated');
  }, false);

function checkEmail(control) {
  if (!isValidEmail(control.value)) {
    control.setCustomValidity('The e-mail is invalid.');
    console.log(control.validationMessage);
  } else {
    control.setCustomValidity('');
  }
}

function isValidEmail(email) {
  return /^[\w!#$%&'*+-\/=\?^_`{|}~](\.?[\w!#$%&'*+-\/=\?^_`{|}~])*@gmail\.com$/i.test(email);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container">
  <form id="myForm" novalidate>
    <div class="form-group">
      <label for="emailField">Email address</label>
      <input type="email" class="form-control" id="emailField" aria-describedby="emailHelp" placeholder="Enter email">
      <small class="valid-feedback">The e-mail address is valid!</small>
      <small class="invalid-feedback">The e-mail address is invalid.</small>
      <small id="emailHelp" class="form-text text-muted">Only <a href="https://www.google.com/gmail/">Gmail</a> is supported</small>
    </div>
    <button class="btn btn-primary" type="submit">Send</button>
  </form>
</div>

当用户输入电子邮件地址时，该片段使用.is-invalid和类来指示验证结果。.is-valid在提交事件处理程序中，使用了约束验证 API。表格只允许发送 Gmail 地址。如果您尝试使用另一个域，则会引发错误。