Question

我是网络开发的新手，我正在为我的大学创建Wi-Fi HotSpot的登录界面。我在大多数设计中都使用了bootstrap，只是为用户名和密码提交实现了一个简单的表单。但是，在用户登录无线热点之前，他们必须同意条款＆amp;条件复选框每次。这是我需要在登录界面上验证的内容。

他们要求的是，如果用户尝试登录而不选中该框，则会弹出一条错误消息，告知用户同意条款＆amp;条件。你可以在这里看到我的代码的现场演示：

http://ece.uprm.edu/~s103924/Login%20Interface/test.html

我不知道从哪里开始，但已经读过使用javascript应该相当简单来验证表单。这是迄今为止源代码的副本：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sign in &middot; ECENET Wireless Internet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>
    <style type="text/css">
      body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
      }

      .form-signin {
        max-width: 350px;
        padding: 19px 29px 45px;
        margin: 0 auto 20px;
        background-color: #fff;
        border: 2px solid #e5e5e5;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }
      .form-signin .form-signin-heading,
      .form-signin .checkbox {
        margin-bottom: 10px;
      }
      .form-signin input[type="text"],
      .form-signin input[type="password"] {
        font-size: 16px;
        height: auto;
        margin-bottom: 15px;
        padding: 7px 9px;
      }

    </style>
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
  </head>

  <body>


    <div class="container">

     <form method="post" action="https://lanaccess.ece.uprm.edu:8001/" class="form-signin">
        <h2 class="form-signin-heading">ECENET Login</h2>
        <input type="text" class="input-block-level" placeholder="Username" maxlength="15">
        <input type="password" class="input-block-level" placeholder="Password">
        <input name="redirurl" type="hidden" value="http://ece.uprm.edu">
        <label class="checkbox">
            <input name="termsagree" type="checkbox" value="yes"> I Agree to the <a data-toggle="modal" href="#example">Terms &amp; Conditions</a>
        </label>
        <button name="accept" class="btn pull-right btn-primary" type="submit">Sign in</button>
        <!--<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Terms & Conditions</a></p>-->
      </form>

    <div id="example" class="modal hide fade in" style="display: none; ">
            <div class="modal-header">
              <a class="close" data-dismiss="modal">×</a>
              <h3>T&eacute;rminos &amp; Condiciones:</h3>
            </div>
            <div class="modal-body">
              <h4>A Todos Los Usuarios:</h4>
              <p><ol>
      <li>
        La Junta de Sindicos de la Universidad de Puerto Rico, mediante Certificacion Numero 072, Serie 1999-2000 aprobo la Politica Institucional y Procedimiento Para el Uso Etico Legal de las Tecnologias de Informacion de la Universidad de Puerto Rico.</li>
      <p>
      <li>
        Las disposiciones contenidas en esta politica son de aplicacion a toda la comunidad universitaria, clientes externos, las personas que presten servicios, asi como a todos los usuarios de los recursos de tecnologias de informacion y servicios de telecomunicaciones.</li>
      <p>
      <li>
        Toda vez que el acceso a las redes y al ambiente de las tecnologias de informacion es un privilegio institucional que otorga la Universidad de Puerto Rico, todos los usuarios tienen la responsabilidad de usar estos recursos de una manera eficiente y efectiva, observando estrictamente todas las normas eticas y legales contenidas en los estatutos estatales, federales, asi como en los reglamentos, politicas y procedimientos de la Universidad.</li>
      <p>
      <li>
        Cualquier violacion a las disposiciones contenidas en esta politica por parte de algun usuario, sera causa suficiente para iniciar un proceso de accion disciplinaria en su contra; incluyendo la no asignacion de los recursos y/o accesos, expulsion, despido o cualquier otra accion legal disponible.</li>
      <p>
      <li>
        Las politicas referentes a los recursos de tecnologia de informacion estan disponibles en <a href="http://www.uprm.edu/politicas" target="_blank">http://www.uprm.edu/politicas</a></li>
    </ol></p>            
            </div>
            <div class="modal-footer">
              <a href="#" class="btn" data-dismiss="modal">Close</a>
            </div>
          </div>


    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap-modal.js"></script>
  </body>
</html>

任何输入都将不胜感激。至少关于在哪里寻找或在线教程解决我的问题的想法。

Answer 1

以下是您的操作..将您的标签更改为运行验证功能onSubmit ..

<form method="post" action="https://lanaccess.ece.uprm.edu:8001/" onsubmit="return validateForm()"  class="form-signin">

function validateForm()
{
var x=document.forms[0]["termsagree"].value;
if (x==null || x=="")
  {
  alert("You must first agree to terms and conditions");
  return false;
  }
}

您需要使用validateForm函数...请记住，如果您返回false，则表单将不会提交。

Answer 2

当用户提交表单

时，您必须检查是否选中了复选框

我忘了添加消息......

$('.form-signin').on('submit', function(e) {
  if (!$(this).find('input[type=checkbox]').is(':checked')){
    alert('You must agree with Terms and Conditions to Sign In');
    e.preventDefault();
  }
});

Answer 3

对于单个复选框，您可以获取该值并检查它：

将<input name="termsagree" type="checkbox" value="yes">更改为：

<input id="termsagree" name="termsagree" type="checkbox" value="yes">

然后在脚本中检查：

if (! document.getElementById('termsagree').checked) {
  alert("You have to agree to the Terms&Conditions");
}

更复杂的验证look here。

Answer 4

再次感谢您的意见。经过上述答案的几次尝试后，我无法理解我需要做什么。我参加了w3Schools的在线课程，最后了解了你的答案。我决定发布我所做的事情以防有人需要这个。

我创建了一个函数来验证这样的表单：

function validateForm（） { var x = document.forms [“signin”] [“termsagree”]。checked; if（x == null || x ==“”） { 警告（“您必须同意条款和条件！”）; 返回false; } }

然后我将表格更改为：

<form form name="signin" method="post" action="https://lanaccess.ece.uprm.edu:8001/" onsubmit="return validateForm()"  class="form-signin">

几乎就是这样。

参考：http://www.w3schools.com/js/js_form_validation.asp

谢谢！

登录验证

4 个答案: