Question

我一直在搜索，找不到一个好的解决方案，或者是否可以通过客户端验证。

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

示例：
下拉选择
效用A
效用B
效用C

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

任何人都知道一个简单的javascript解决方案可以提供答案吗？我为此打败了自己。

谢谢！

Answer 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

Answer 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
}

Javascript验证下拉列表和文本输入

2 个答案: