1

私はWeb開発に不慣れで、大学でWi-FiHotSpotのログインインターフェイスを作成しています。デザインの大部分にブートストラップを使用し、ユーザー名とパスワードを送信するための単純なフォームを実装しました。ただし、ユーザーがワイヤレスホットスポットにログインする前に、毎回利用規約のチェックボックスに同意する必要があります。これは、ログインインターフェイスで検証する必要があるものです。

彼らが要求したのは、ユーザーがチェックボックスをオンにせずにログインしようとすると、利用規約に同意するようにユーザーに通知するエラーメッセージがポップアップすることです。ここで私のコードのライブデモを見ることができます：

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>

任意の入力をいただければ幸いです。少なくとも、私の問題に対処するオンラインの見どころやチュートリアルのアイデアについては。

4

4 に答える 4

0

単一のチェックボックスの場合、その値を取得してチェックできます。

に変更<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");
}

より複雑な検証については、こちらをご覧ください。

于 2013-02-01T18:51:51.477 に答える
0

これがあなたがすることです..タグを変更して、検証関数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 を返すとフォームが送信されないことを忘れないでください。

于 2013-02-01T18:41:00.513 に答える