如何根据从下拉菜单中选择的选项设置不同的输入字段模式？

Question

我正在创建一个表单，其中包含用于选择区域的下拉菜单。并且，下一个字段是该区域特定区域的代码。并且特定区域的代码模式因地区而异。

例如

亚洲 -- AAAA0000 欧洲——AAAAA000 澳大利亚 -- 000AAA

对于 aisa 区域，特定区域的每个代码将包含 4 个字母字符和 4 个数字。 与特定区域的欧洲代码相同，将包含 5 个字母字符和 3 个数字。

如何使用 javascript 或 jquery 来验证特定区域的输入模式。

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  <select id="region">
  <option value="asia">Asia</option>
  <option value="europe">Europe</option>
  <option value="australia">Australia</option>
  </select><br>
  Area:<br>
  <input type="text" name="area", id="area">
</form>

$('#region').change(function () {
 var ele = document.getElementById("region");

 if (ele.value == "Asia"){
    document.getElementById('area').pattern = '\d{4}[a-z]{4}';
 }
 else if (ele.value == "Europe"){
 }
 else if (ele.value == "Australia"){
 }

});

任何提示将不胜感激。

Answer 1

您可以在javascript中使用RegEx匹配来查找在区域字段中输入的值是否匹配。

`    $('#region').change(function () {
          var ele = document.getElementById("region");
          var AsiaRegex = RegExp('^([A-Z]{4}[0-9]{4})$','g');
          var EuropeRegex = RegExp('^([A-Z]{5}[0-9]{3})$','g');
          var hasMatched = false;
          if (ele.value == "asia"){
             var code = document.getElementById('area').value;
             hasMatched = AsiaRegex.test(code);
             //console.log(hasMatched)
          }
          else if (ele.value == "Europe"){
            var code = document.getElementById('area').value;
            hasMatched = AsiaRegex.test(code);
            //console.log(hasMatched)
          }
       })`

^[A-Z]{n} - 匹配大写字母的前 n 个字符 [0-9]{n} - 匹配 n 个数字字符