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

Javascript Validation Dropdown and Text Input

本文关键字：文本 输入 下拉菜单 验证 Javascript      更新时间：2023-09-26

我已经找遍了，找不到一个很好的解决方案，或者如果有可能与客户端验证。

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

例子:
下拉选择
公用一个
实用程序B
实用C

文本输入
如果用户选择公用事业A，他们必须提供一个8位的帐号。
如果用户选择工具B，他们必须提供一个10位的帐号。
如果用户选择工具C，他们必须提供一个12位的帐号。

谁知道一个简单的javascript解决方案，将提供答案?我都快把自己折磨死了。

谢谢!

给你!

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

其中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
}
相关文章：