JavaScript实时表单验证与计算教程

<form name="calculationForm">
  <p>请输入订单总额: £</p>
  <div>
    <!-- type="number" 限制输入为数字，name="cost" 方便JS访问 -->
    &lt;input name=&quot;cost&quot; type=&quot;number&quot; placeholder=&quot;订单费用&quot; class=&quot;js-enterValue&quot;&gt;
  </div>
  <p class="js-totalText">您的总计是: £<output name="result"></output></p>
</form>

说明：

• ：为表单命名，方便JavaScript获取。
• <input name="cost" type="number">：关键之处。浏览器会自动处理非数字字符的输入，并提供数值增减控件。
• ：用于显示计算结果，语义化更好。

3.2 JavaScript 逻辑

我们将监听 input 事件，以便在用户每次输入时都重新计算并更新结果。

// 获取表单元素
const form = document.forms.calculationForm;
const costInput = form.cost; // 通过name属性访问输入字段
const resultOutput = form.result; // 通过name属性访问输出字段

// 监听输入事件
costInput.addEventListener('input', () => {
  let enteredValue = costInput.value;
  let costNum = Number(enteredValue); // 将输入值转换为数字

  // 检查是否为有效数字或输入为空
  // Number('') 会返回 0，所以需要额外检查原始输入是否为空字符串
  if (isNaN(costNum) || enteredValue.trim() === '') {
    resultOutput.value = '无效输入'; // 如果不是有效数字或输入为空，则显示错误
    return; // 提前退出
  }

  let total = costNum;
  if (costNum < 40) {
    total += 10; // 如果金额小于40，则额外增加10
  }

  resultOutput.value = total.toFixed(2); // 格式化为两位小数显示
});

说明：

• document.forms.calculationForm：通过表单的 name 属性获取表单对象。
• form.cost 和 form.result：直接通过表单对象访问其子元素（通过 name 属性）。
• Number(enteredValue)：将输入字符串转换为数字。如果输入为空字符串，它将返回 0。如果输入是非数字字符（尽管 type="number" 会限制，但用户仍可能通过开发者工具修改），它将返回 NaN。
• isNaN(costNum) || enteredValue.trim() === ''：这是一个重要的改进，用于处理无效输入或空输入。enteredValue.trim() === '' 确保即使 Number('') 转换为 0，我们也能识别出原始输入是空的，并提供相应的反馈。
• total.toFixed(2)：将计算结果格式化为带有两位小数的字符串，适用于货币显示。

3.3 优缺点

• 优点： 简单易用，浏览器提供内置的输入限制和用户界面，减少JavaScript代码量。
• 缺点： 浏览器兼容性可能略有差异（例如，Firefox允许输入非数字字符但会标记为无效），且增减箭头可能不符合所有设计需求。

4. 方法二：使用 type="text" 结合 inputmode 和 pattern

如果需要更精细的控制输入字段的外观（例如，不显示增减箭头），同时又想在移动设备上提供数字键盘，可以使用 type="text" 结合 inputmode="numeric" 和 pattern="\d*"。

4.1 HTML 结构

<form name="calculationFormAlternative">
  <p>请输入订单总额: £</p>
  <div>
    <!-- type="text" 结合 inputmode 和 pattern 提供自定义控制 -->
    &lt;input name=&quot;cost&quot; type=&quot;text&quot; inputmode=&quot;numeric&quot; pattern=&quot;\d*&quot; placeholder=&quot;订单费用&quot; class=&quot;js-enterValue&quot;&gt;
  </div>
  <p class="js-totalText">您的总计是: £<output name="result"></output></p>
</form>

说明：

• type="text"：允许用户输入任何字符。
• inputmode="numeric"：提示移动设备显示数字键盘，提升用户体验。
• pattern="\d*"：一个正则表达式，表示只允许输入数字。这主要用于浏览器内置的表单验证（当表单提交时），但我们仍需在JavaScript中进行实时验证。

4.2 JavaScript 逻辑

JavaScript 逻辑与方法一基本相同，因为核心的数值转换和计算逻辑是通用的。主要的区别在于 type="text" 不会自动阻止非数字字符的输入，所以 isNaN(costNum) 的检查变得更加重要。

const formAlternative = document.forms.calculationFormAlternative;
const costInputAlternative = formAlternative.cost;
const resultOutputAlternative = formAlternative.result;

costInputAlternative.addEventListener('input', () => {
  let enteredValue = costInputAlternative.value;
  let costNum = Number(enteredValue);

  // 检查是否为有效数字或输入为空
  if (isNaN(costNum) || enteredValue.trim() === '') {
    resultOutputAlternative.value = '无效输入';
    // 可以在此处添加额外的UI反馈，例如改变输入框边框颜色
    costInputAlternative.style.borderColor = 'red';
    return;
  }

  // 如果输入有效，恢复正常样式
  costInputAlternative.style.borderColor = '';

  let total = costNum;
  if (costNum < 40) {
    total += 10;
  }

  resultOutputAlternative.value = total.toFixed(2);
});

说明：

• 由于 type="text" 不会像 type="number" 那样自动限制输入，isNaN(costNum) 检查在这里更为关键。
• 可以根据 isNaN 的结果动态修改输入框的样式，为用户提供更直观的错误反馈。

4.3 优缺点

• 优点： 对UI有更大的控制权，可以避免 type="number" 带来的默认增减箭头。inputmode="numeric" 提供了良好的移动端体验。
• 缺点： 需要更多的JavaScript代码来处理严格的输入限制和错误反馈，因为 type="text" 本身不提供强类型验证。

5. 总结与注意事项

• 选择合适的 type： 如果对UI要求不高，type="number" 是最简单的选择。如果需要自定义UI并优化移动端键盘，type="text" 结合 inputmode 和 pattern 是更好的方案。
• **实时反馈

好了，本文到此结束，带大家了解了《JavaScript实时表单验证与计算教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！