Javascript 验证下拉菜单和文本输入

Posted 2023-04-18

【中文标题】Javascript 验证下拉菜单和文本输入

【英文标题】：Javascript Validation Dropdown and Text Input

【发布时间】：2013-01-01 04:28:10

【问题描述】：

我已经搜索了所有内容，但找不到一个好的解决方案，或者是否可以通过客户端验证。

我的客户要求根据下拉列表中的选择将用户限制为固定长度的数字组合。

示例：下拉选择 实用程序 A 实用程序 B 实用程序 C

文本输入 如果用户选择实用程序 A，则必须提供 8 位帐号。 如果用户选择实用程序 B，他们必须提供一个 10 位数的帐号。 如果用户选择实用程序 C，则必须提供 12 位帐号。

有人知道可以提供答案的简单 javascript 解决方案吗？为此我把自己打死了。

谢谢！

【问题讨论】：

投反对票，直到您详细说明您在“javascript 解决方案”的哪个方面遇到困难。

【参考方案1】：

给你！

html

<select id="Select" onchange="checkText()">
  <option value="8"> A</option>
  <option value="10"> B</option>
  <option value="12"> C</option>
</select>

<input id="Enter" type="text" onchange="checkText()" />

<div id="Message"></div>

JavaScript

function checkText(input) 
  if(document.getElementById("Enter").value.length != document.getElementById("Select").selectedOptions[0].value) 
    document.getElementById("Message").innerHTML = "Your ID has to be " + document.getElementById("Select").selectedOptions[0].value + " digits long";
   else 
    document.getElementById("Message").innerHTML = "";
  

这一点都不精彩。但我不会为你做你的工作。您可以从这里轻松取货。

我还创建了一个jsFiddle

【讨论】：

感谢您的开始。我并没有试图让某人为我完成工作。现在，我已经设法完成了实时验证，通知用户需要最小值和最大值 - 但它不是基于下拉选择。只是想我会四处打听。

【参考方案2】：

select 是您的下拉菜单，input 是您的输入字符串，您可以使用：

if ( !/^\d+$/.test(input) ||
    input.length != [ 8, 10, 12 ][ select.selectedIndex ] ) 
    // Input invalid

关于@Amberland 的反馈：

或者，对于更通用的解决方案，将所需位数存储为每个选项元素的值，例如<option value=8>Utility A</option>，并使用：

if ( !/^\d+$/.test(input) || input.length != select.value ) 
    // Input invalid

【讨论】：

这远非通用。如果您对<option> 的标记有最细微的变化怎么办？

@Amberlamps。是的，数组中数字的顺序必须与选项的顺序相对应。这不是很明显吗？

是的！但不是通用的！我绝不会批准这样的解决方案。

@Amberlamps。我同意将所需数字的数量存储为每个选项元素的属性会是更好的方法；）

您无需将其存储在任何地方。只需从select 元素中读取即可。