javascript - 验证登录

Question

我是 Web 开发的新手，我正在为我大学的 Wi-Fi HotSpot 创建一个登录界面。我在大部分设计中都使用了引导程序，并且只是实现了一个简单的用户名和密码提交表单。但是，在用户可以登录到无线热点之前，他们必须每次都同意条款和条件复选框。这是我需要在登录界面上验证的内容。

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

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>

任何投入将不胜感激。至少在解决我的问题的地方或在线教程的想法上。

score 0 · Accepted Answer

再次感谢您的输入。经过几次尝试上述答案后，我无法很好地理解我需要做什么。我参加了 w3Schools 的在线课程，终于明白了你的答案。我决定发布我所做的以防有人需要。

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

函数 validateForm() { var x=document.forms["signin"]["termsagree"].checked; if (x==null || x=="") { alert("您必须同意条款和条件！"); 返回假；} }

然后我把表格改成这样：

<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

谢谢！

score 0 · Accepted Answer

这就是你要做的.. 改变你的标签来运行验证功能 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，则表单将不会提交。

score 0 · Accepted Answer

当用户提交表单时，您必须检查复选框是否被选中

我忘记添加消息了...

$('.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();
  }
});

score 0 · Accepted Answer

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

变成<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");
}

更复杂的验证看这里。

javascript - 验证登录

4 回答 4

Related

Reference