Question

我写了一个简单的注册网页，想要确认密码并检查电子邮件地址格式，并在同一行中的输入元素后显示检查或交叉标记。

在我将Bootstrap添加到我的html文件之前，检查或交叉符号出现在同一行中的输入元素之后。但是在我将Bootstrap添加到我的html文件之后（特别是在添加class="form-control"之后），检查或交叉标志出现在下一行中。我想知道如何解决我的问题？感谢。

这是我的html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Registration</title>
    <style>
      html, body{
      height: 100%;
      width: 100%;
      /* border: 1px solid black; */
      background: linear-gradient(to top, #f2f6fb, #b3cae3);
      }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script
       src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script
       src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script language="javascript" type="text/javascript" src="../js/register.js" defer></script>
  </head>
  <body>


    <div class="container">

      <div class="row">
        <div class="col-lg-offset-5">

          <form class="form-horizontal" action="RegisterProcess" method="post">

            <div class="form-group">
              <div class="col-lg-5">
                <input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
                <span width="5" name="passwordResult" id="passwordResult"></span>
              </div>
            </div>

            <div class="form-group">
              <div class="col-lg-5">
                <input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" placeholder="Confirm Password" style="border-color: grey; background-color\
: white">
                <span width="5" name="passwordConfirmResult" id="passwordConfirmResult"></span>
              </div>
            </div>
           <div class="form-group">
              <div class="col-lg-5">
                <input type="email" class="form-control" name="email" id="email" placeholder="Email" style="border-color: grey; background-color: white">
                <span width="5" name="emailResult" id="emailResult"></span>
              </div>
            </div>

            <div class="form-group">
              <div class="col-lg-offset-3 col-lg-5">
                <input type="submit" id="register" name="register" value="Sign Up">
              </div>
            </div>
          </form>


        </div>
      </div>
    </div>


  </body>

</html>

这是我的javascript

function arePasswordsSame() {
    input = this; // document.getElementById("passwordConfirm");                                                                                                                   
    if (input.value != document.getElementById("password").value) {
        input.setCustomValidity("Password Must be Matching.");
    document.getElementById("passwordConfirmResult").innerHTML = "&times;";
    } else {
        input.setCustomValidity("");
    document.getElementById("passwordConfirmResult").innerHTML = "&#10004;";
    }
}
document.getElementById("passwordConfirm").addEventListener("change",arePasswordsSame);

function validateEmail(){
    input = this; // document.getElementById("email");                                                                                                                             
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(! input.value.match(mailformat)){
    input.setCustomValidity("Email is invalid.");
        document.getElementById("emailResult").innerHTML = "&times;";
    }else{
        input.setCustomValidity("");
        document.getElementById("emailResult").innerHTML = "&#10004;";
    }
}
document.getElementById("email").addEventListener("change",validateEmail);

Answer 1

您可以使用随引导程序附带的内置input-group-addon

<div class="input-group">
  <div class="col-lg-5">
    <input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
    <span width="5" class="input-group-addon" name="passwordResult" id="passwordResult"></span>
  </div>
</div>

https://getbootstrap.com/docs/4.0/components/input-group/

修改

这应该是标记;

<div class="form-group"> <div class="col-lg-5"> <div class="input-group"> <input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white"> <span class="input-group-addon" name="passwordResult" id="passwordResult"> </span> </div> </div> </div>

Answer 2

在Bootstrap中，public async Task<Location> GetLocation(int id) { string sql = "SELECT * FROM locations WHERE id = @p_Id;"; using (var con = _db.CreateConnection()) { //get results } }类会导致form-control为inputs，宽度为100％。您必须覆盖默认样式以防止这种情况（请注意，只要在加载Bootstrap后添加此CSS，就可以删除display:block;规则）：

!important

function arePasswordsSame() {
    input = this; // document.getElementById("passwordConfirm");                                                                                                                   
    if (input.value != document.getElementById("password").value) {
        input.setCustomValidity("Password Must be Matching.");
    document.getElementById("passwordConfirmResult").innerHTML = "&times;";
    } else {
        input.setCustomValidity("");
    document.getElementById("passwordConfirmResult").innerHTML = "&#10004;";
    }
}
document.getElementById("passwordConfirm").addEventListener("change",arePasswordsSame);

function validateEmail(){
    input = this; // document.getElementById("email");                                                                                                                             
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(! input.value.match(mailformat)){
    input.setCustomValidity("Email is invalid.");
        document.getElementById("emailResult").innerHTML = "&times;";
    }else{
        input.setCustomValidity("");
        document.getElementById("emailResult").innerHTML = "&#10004;";
    }
}
document.getElementById("email").addEventListener("change",validateEmail);

.form-control {
  display:inline-block!important;
  width:95%!important;
}

如何在同一行的输入元素后面显示检查符号？

2 个答案: