如何用JavaScript基于SSO传入的邮箱限制用户预约表单提交次数至X次？

Got it, let's solve this! Since your environment only supports client-side JavaScript, we can use localStorage to keep track of submission counts per user (a regular in-memory object would reset when the page reloads, so localStorage is the way to go for persistence). Here's a complete, tailored solution for your form:

We'll focus on three core pieces:

• Persist counts: Use localStorage to store a JSON object mapping emails to their submission counts (persists across page reloads/browser sessions).
• Validate before submit: Check if the user has exceeded their limit before allowing the form to send.
• Lock the email field: Since the email comes from SSO, make it read-only to prevent tampering with the identifier.

<form action="" method="post" enctype="text/plain" id="bookingForm">
  Email:<br>
  <input type="text" name="emailinput" id="email" readonly> <!-- Added readonly to prevent edits -->
  <br><br>
  <input type="submit" value="Submit">
</form>

<script>
// Set your maximum allowed submissions here
const MAX_SUBMISSIONS = 3; // Replace 3 with your desired limit (X)

// Get references to the form and email input
const bookingForm = document.getElementById('bookingForm');
const emailInput = document.getElementById('email');

// Load existing submission counts from localStorage, or start fresh
let submissionCounts = JSON.parse(localStorage.getItem('submissionCounts')) || {};

// Handle form submission event (better than button onclick, catches Enter key submits too)
bookingForm.addEventListener('submit', function(e) {
  const userEmail = emailInput.value.trim();
  
  // Basic check: ensure email is present (should be populated by SSO)
  if (!userEmail) {
    alert('Email is required.');
    e.preventDefault(); // Stop form from submitting
    return;
  }
  
  // Get current submission count for this user (default to 0 if first submission)
  const currentCount = submissionCounts[userEmail] || 0;
  
  // Check if user has exceeded the limit
  if (currentCount >= MAX_SUBMISSIONS) {
    alert(`You've reached the maximum submission limit of ${MAX_SUBMISSIONS} times.`);
    e.preventDefault(); // Block form submission
    return;
  }
  
  // If valid, update the count and save back to localStorage
  submissionCounts[userEmail] = currentCount + 1;
  localStorage.setItem('submissionCounts', JSON.stringify(submissionCounts));
  
  // Optional: Confirm submission success to the user
  alert('Submission successful!');
});

// Optional: Pre-fill email from SSO (replace with your SSO's variable/mechanism)
// Example: If your SSO provides the email in a global variable like window.ssoData.email
// emailInput.value = window.ssoData?.email || '';
</script>

• localStorage: This is a browser-built storage that retains data even after the user closes the browser. We store a JSON object where each key is a user's email, and the value is their submission count.
• Readonly Email: The readonly attribute ensures the user can't modify the email passed from SSO, keeping our count tracking accurate.
• Submit Handler: We listen to the form's submit event instead of the button's onclick to cover all submission scenarios (like pressing Enter in the input field).
• Limit Enforcement: Before allowing the form to submit, we check the user's current count against the limit. If they've hit the max, we block submission and show an alert.

• Client-Side Limitation: Since this runs in the user's browser, a technically savvy user could modify localStorage to reset their count. If absolute security is critical, server-side validation would be needed—but given your environment constraints, this is the best possible client-side solution.
• SSO Integration: Make sure to uncomment and adjust the pre-fill line to match how your SSO provides the user's email (e.g., a global variable, cookie, or injected value).
• Count Reset: If you need to reset counts periodically (e.g., monthly), you could add logic to store timestamps with each count and purge old entries from localStorage.

内容的提问来源于stack exchange，提问作者innovationandpharma