基于JavaScript实现含验证规则的Min、Max、Mul输入框与Validate按钮

Hey there, here's a complete implementation that meets all your requirements, with clear explanations so you can follow along:

HTML Structure #

First, we'll create the input fields and button with proper labels for accessibility:

<div class="form-container">
  <div class="input-group">
    <label for="minInput">Min:</label>
    <input type="number" id="minInput" placeholder="Enter Min value">
  </div>
  <div class="input-group">
    <label for="maxInput">Max:</label>
    <input type="number" id="maxInput" placeholder="Enter Max value">
  </div>
  <div class="input-group">
    <label for="mulInput">Mul:</label>
    <input type="number" id="mulInput" placeholder="Enter Mul value">
  </div>
  <button id="validateBtn">Validate</button>
</div>

CSS for Highlighting #

We'll add a simple style to highlight invalid inputs with a red border (plus a subtle background for better visibility):

.form-container {
  margin: 20px;
}
.input-group {
  margin: 10px 0;
}
label {
  display: inline-block;
  width: 60px;
  font-weight: bold;
}
input {
  padding: 5px;
  width: 150px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
input.invalid {
  border: 2px solid #ff0000;
  background-color: #ffe6e6;
}
button {
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  border: none;
  background-color: #007bff;
  color: white;
}
button:hover {
  background-color: #0056b3;
}

JavaScript Validation Logic #

This is where we'll check all your specified conditions and apply the red border to invalid inputs. We'll reset the validation state each time the button is clicked, then check each condition one by one:

// Get references to our elements
const minInput = document.getElementById('minInput');
const maxInput = document.getElementById('maxInput');
const mulInput = document.getElementById('mulInput');
const validateBtn = document.getElementById('validateBtn');

// Add click event listener to the Validate button
validateBtn.addEventListener('click', () => {
  // Parse input values as integers (handle empty inputs gracefully)
  const min = parseInt(minInput.value) || 0;
  const max = parseInt(maxInput.value) || 0;
  const mul = parseInt(mulInput.value) || 0;

  // Reset all inputs to valid state first
  minInput.classList.remove('invalid');
  maxInput.classList.remove('invalid');
  mulInput.classList.remove('invalid');

  // Check each condition and highlight invalid inputs
  // Condition 1: Min < Max
  if (!(min < max)) {
    minInput.classList.add('invalid');
    maxInput.classList.add('invalid');
  }

  // Condition 2: Mul < Max
  if (!(mul < max)) {
    mulInput.classList.add('invalid');
    maxInput.classList.add('invalid');
  }

  // Condition 3: Mul <= Min
  if (!(mul <= min)) {
    mulInput.classList.add('invalid');
    minInput.classList.add('invalid');
  }

  // Condition 4a: Min is a factor of Max
  if (!(max % min === 0)) {
    minInput.classList.add('invalid');
    maxInput.classList.add('invalid');
  }

  // Condition 4b: Mul is a factor of Max
  if (!(max % mul === 0)) {
    mulInput.classList.add('invalid');
    maxInput.classList.add('invalid');
  }
});

How It Works #

• Reset First: Every time you click Validate, we clear any existing red borders so we start fresh with each check.
• Condition Checks: For each of your requirements, we verify if the condition is met. If not, we add the invalid class to all inputs involved in that condition—this helps users see exactly which values are conflicting.
• Highlighting: The CSS takes care of the visual feedback, making invalid inputs immediately noticeable.

Testing Examples #

• Valid Case: Enter Min=5, Max=10, Mul=5 → All conditions are satisfied, no red borders appear.
• Invalid Case: Enter Min=5, Max=10, Mul=6 → Two conditions fail (Mul <= Min and Mul is a factor of Max), so Mul will be highlighted in red. Max will also be highlighted because it’s not divisible by Mul, which aligns with the requirement that Max must be divisible by both Min and Mul.

Quick Notes #

• We added a fallback to 0 for empty inputs to avoid NaN errors—you could extend this with a warning message for empty fields if needed.
• The highlighting targets all inputs related to a failed condition, but if you only want to highlight the "problem" input (e.g., only Mul when it’s larger than Min), you can adjust the logic to add the invalid class only to the specific input instead of both.

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