个人中心
gpt4 book ai didi

javascript - 如何使复选符号出现在同一行中的输入元素之后？

转载 作者：行者123 更新时间：2023-11-28 05:14:36 27 4
gpt4 key购买 nike

我写了一个简单的注册网页，想确认密码和检查邮箱地址格式，并在同一行输入元素后显示勾号或叉号。

在我将 Bootstrap 添加到我的 html 文件之前，勾号或叉号出现在同一行中的输入元素之后。但是在我将 Bootstrap 添加到我的 html 文件之后(尤其是在添加 class="form-control" 之后)，勾号或叉号反而出现在下一行。我想知道如何解决我的问题？谢谢。

enter image description here

这是我的 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);

最佳答案

您可以使用 bootstrap 附带的内置 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">&nbsp;</span>
    </div>
  </div>
</div>

关于javascript - 如何使复选符号出现在同一行中的输入元素之后？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48119484/

27 4 0
文章推荐： javascript - 使用 html 属性设置 javascript 变量
文章推荐： javascript - 前端 API token 暴露
文章推荐： javascript - 自动刷新天气预报脚本
文章推荐： html - HTML 属性名称中的美元符号
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com