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

时间:2019-08-11 13:57:44

标签: javascript jquery validation drop-down-menu

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

例如

亚洲-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"){
 }

});

任何提示将不胜感激。

1 个答案:

答案 0 :(得分:0)

您可以在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个数字字符