驗證登錄

我是網絡開發新手，我正在爲我的大學創建Wi-Fi熱點的登錄界面。我在設計的大部分時間使用了bootstrap，並且只是實現了用於用戶名和密碼提交的簡單表單。但是，在用戶可以登錄到無線熱點之前，他們必須每次同意條件&條件複選框。這是我需要在登錄界面上驗證的內容。驗證登錄

他們要求的是，如果用戶嘗試登錄而未選中該框，則會彈出一條錯誤消息，告知用戶同意條款&的條件。你可以看到我的代碼現場演示在這裏：

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>

任何輸入將不勝感激。至少想到在哪裏尋找或在線教程解決我的問題。

來源

2013-02-01 Wilo Maldonado

這裏是你做什麼..改變你的標籤運行驗證功能的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-01 18:41:00 spooky

你必須選中該複選框是否被選中與否，當用戶提交表單

我忘了添加消息...

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

來源

2013-02-01 18:43:56 tadeuzagallo

對於單個複選框，你可以得到該值和檢查它：

變化<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。

來源

2013-02-01 18:51:51 kms

我試過你的執行程序考試，但我必須改變一些其他的工作？我做了您爲複選框指定的更改，並且還添加了以下內容：

相關問題

回答

相關問題