9.24java wab实现创建新界面验证码

100

101

<!DOCTYPE html>
<html>
<head>
  <title>User Login</title>
  <style>
    .container {
      width: 300px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      text-align: center;
    }
    .input-group {
      margin-bottom: 10px;
    }
    .input-group label {
      display: block;
      margin-bottom: 5px;
    }
    .input-group input {
      width: 100%;
      padding: 5px;
    }
    .input-group img {
      margin-top: 10px;
    }
    .input-group button {
      width: 100%;
      padding: 7px;
      background-color: #4CAF50;
      color: white;
      border: none;
    }
  </style>
  <script>
    function generateCaptcha() {
      var captcha = '';
      var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      var captchaLength = 4;
      for (var i = 0; i < captchaLength; i++) {
        captcha += characters.charAt(Math.floor(Math.random() * characters.length));
      }
      // Display the generated captcha
      document.getElementById('captcha').textContent = captcha;
      // Update the captcha image source with the generated captcha
      document.getElementById('captchaImage').src = 'https://dummyimage.com/150x50/000/fff&text=' + captcha;
    }
 
    function validateForm(event) {
      event.preventDefault(); // Prevent form submission
      var captchaInput = document.getElementById('captchaInput').value;
      var captchaLabel = document.getElementById('captcha').textContent;
      if (captchaInput.toUpperCase() === captchaLabel.toUpperCase()) {
        // Correct captcha, perform actions for successful login
        alert('Login successful!');
        // Redirect to success page here
 
        // Clear form data
        document.getElementById('username').value = '';
        document.getElementById('password').value = '';
        document.getElementById('captchaInput').value = '';
 
        // Generate a new captcha
        generateCaptcha();
      } else {
        // Incorrect captcha, show error message
        alert('Incorrect captcha!');
        // Clear captcha input
        document.getElementById('captchaInput').value = '';
        // Generate a new captcha
        generateCaptcha();
      }
    }
  </script>
</head>
<body onload="generateCaptcha()">
  <div class="container">
    <h2>User Login</h2>
    <form action="/login" method="post" onsubmit="validateForm(event)">
      <div class="input-group">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
      </div>
      <div class="input-group">
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
      </div>
      <div class="input-group">
        <label for="captcha">Captcha:</label>
        <input type="text" id="captchaInput" name="captcha" required>
        <span id="captcha"></span>
        <img src="" alt="Captcha" id="captchaImage">
        <button type="button" onclick="generateCaptcha()">Refresh</button>
      </div>
      <div class="input-group">
        <button type="submit">Login</button>
      </div>
    </form>
  </div>
</body>
</html>