在JavaScript中創建帶有驗證的輸入框彈出框

我在這個主題中感到困惑，應該怎麼做以及如何。在JavaScript中創建帶有驗證的輸入框彈出框

我想在從列表中刪除用戶之前，彈出框詢問密碼。如果密碼（如某些值，例如ex12345）是正確的，則刪除用戶如果否，則說密碼不正確。

我有我的PHP頁面與簡單的彈出。我想彈出輸入框

任何幫助將不勝感激。

這是我的代碼。作爲view.php

<html> 
<head> 
<meta charset="utf-8"> 
<title>LogIn Information System</title> 
<link rel="stylesheet" media="screen" href="stylesS.css" > 
<script> 
    function confirmDelete(delUrl) 
    { 
     if (confirm("Are you sure you want to delete")) 
     { 
      document.location = delUrl; 
     } 
    } 
</script> 
</head> 
<body> 
<div class="header-top"> 
      <a href="//home" class="utopia-logo"> 
       <img src="//images/logo.png" alt="asd" /> 
      </a>  
    </div><!-- End header --> 

<table class = "button_table"> 
    <tr> 
     <td><button class="submit" type="submit"><a href="home.php">Home</a></button></td> 
     <td><button class="submit" type="submit"><a href="find.php">Search</a></button></td> 
     <td><button class="submit" type="submit"><a href="view.php">Customer List</a></button></td> 
     <?php 
      if($_SESSION['valid']=='admin'){ 

      echo "<td><button class='submit' type='submit'><a href='add.php'>Add User</a></button></td>"; 
      echo "<td><button class='submit' type='submit'><a href='users.php'>View User</a></button></td>"; 
      } 
     ?> 
     <td><button class="submit" type="submit"><a href="logout.php">Logout</a></button></td> 

    </tr> 
</table> 
<form class="contact_form" action="search.php" method="post" name="contact_form"> 
<ul> 
    <li> 
     <h2>Search Results</h2> 
     <span class="required_notification">Following search matches our database</span> 
    </li> 
</li> 
    <?php 
     echo "<table border='0' width='100%'>"; 
     echo "<tr class='head'>"; 
       echo "<th>Name</th>"; 
       echo "<th>Last Name</th>"; 
       echo "<th>Phone</th>"; 
       echo "<th>Action</th>"; 
       echo "</tr>"; 
     while($row = mysql_fetch_array($find)){ 
       echo "<tr class='t1'>"; 
       echo "<td>".$row['fname']."</td>"; 
       echo "<td>".$row['lname']."</td>"; 
       echo "<td>".$row['phone']."</td>"; 
     ?> 
       <td> 
       <a href="edit.php?id=<?php echo $row['id'];?>" class='action'>Edit</a> | 
       <a href="delete.php?id=<?php echo $row['id'];?>" class='action' onclick="return confirm('Are you sure you want to delete?')">Serve</a> 
       </td> 
     <?php 
       echo "</tr>"; 

     } 
     echo "</table>"; 
    ?> 
</li> 
</ul> 

</form> 
</body> 
</html>

Delete.php

if (isset($_GET['id']) && is_numeric($_GET['id'])) 
{ 
// get id value 
$id = $_GET['id'];; 
} 

$rec = "delete from data where id='$id'"; 

if(mysql_query($rec)){ 
echo "<center></h1>Selected Customer serve by DC</h1></center>"."<br />"; 
echo "<center></h6>Please wait while you are redirected Home in 3 seconds..</h6>  </center>"."<br />"; 
header('Refresh: 3; url=home.php'); 
} 
else{ 
die("Data failed to delete in the database"); 
} 
?>

來源

2012-12-18 krish kim

什麼是烏拉圭回合的問題嗎？ –

這不應該在JavaScript中完成，因爲攻擊者可以跳過確認框並直接前往URL。 –

Paul S @我該怎麼辦？任何想法。？ –

好的，這裏是我想你要求的一個例子：我在標題中分隔了js，這樣你可以更好地理解。第一個是彈出框，第二個腳本是ajax調用。記住，這是一個非常簡單的例子

的test.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script> 

$(document).ready(function() { 

    //select all the a tag with name equal to modal 
    $('a[name=modal]').click(function(e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     //Get the A tag 
     var id = $(this).attr('href'); 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set heigth and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect  
     $('#mask').fadeIn(1000);  
     $('#mask').fadeTo("slow",0.9); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/3-$(id).height()/3); 
     $(id).css('left', winW/2-$(id).width()/2); 

     //transition effect 
     $(id).fadeIn(2000); 

    }); 

    //if close button is clicked 
    $('.window .close').click(function (e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     $('#mask').hide(); 
     $('.window').hide(); 
    });  

    //if mask is clicked 
    $('#mask').click(function() { 
     $(this).hide(); 
     $('.window').hide(); 
    });   

    $(window).resize(function() { 

     var box = $('#boxes .window'); 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set height and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     box.css('top', winH/2 - box.height()/2); 
     box.css('left', winW/2 - box.width()/2); 

    }); 

}); 

</script> 

<script type="text/javascript"> 
function ConfirmDelete() 
{ 
var confirm = document.getElementById('confirm').value; 
var dataString = 'password='+ confirm; 
if(confirm.length>0) 

{ 

$.ajax({ 
type: "GET", 
url: "delete.php", 
data: dataString, 
success: function(server_response) 
{ 
document.getElementById("results").style.display = "block"; 
$('#results').html(server_response).show(); 
$('#mask').hide(); 
$('.window').hide(); 

} 
}); 

} 
return false; 
} 

</script> 
<style type="text/css"> 
#mask{position:absolute;left:0;top:0;z-index:9000;background-color:#222;display:none} 
.window{position:fixed;left:0;top:0;width:450px;height:200px;display:none;z-index:9999;padding:20px} 
#dialog1{padding:10px 10px 8px 25px;border:2px solid #a1a1a1;width:450px;height:200px; background-image:url('imgs/bg.jpg'); 

</style> 
    </head> 
    <body> 
<a href="#dialog1" name="modal">Delete this Entry</a> 
<!-- Start of MODAL BOX --> 
<div id="dialog1" class="window" align="center"> 
<font color="#FFFFFF">If you are sure you wish to delete this please enter your admin password</font><br> 
<font color="#FFFFFF"><b>test password (Admin)</b></font> 
<input type="password" id="confirm"/><br><br> 
<input type="submit" name="confirm_delete" onclick="ConfirmDelete()" value="Confirm Delete"> 
</div><!-- End of MODAL BOX --> 
<div id="mask"></div><!-- Mask to cover the whole screen --> 



<div id="results" class="results" style="display:none;"> </div> 

    </body> 
</html>

調用頁面，這是在那裏你將有你的PHP

delete.php

<?PHP 
if($_GET['password'] === "Admin") 
    { 
     //sucess do your delete here 
     echo " this was the correct password "; 

    } 
    else 
     { 
      //failure 
      echo " Password incorrect!! "; 

    } 
?>

來源

2012-12-18 20:03:18

嗨，你的方式是正確的，但我做了這個驗證與PHP謝謝你的任何方式.. !!!! !!!!!!!!! –

-1

做客戶端JS檢查，並在服務器端使用CRSF - http://en.wikipedia.org/wiki/Cross-site_request_forgery

這裏是一個很好的例子：CSRF (Cross-site request forgery) attack example and prevention in PHP

來源

2012-12-18 18:20:59 Alex