javascript - 如何根据从下拉菜单中选择的选项设置不同的输入字段模式?
问题描述
我正在创建一个表单,它有一个用于选择区域的下拉菜单。并且,下一个字段是该区域特定区域的代码。并且特定区域的代码模式因地区而异。
例如
亚洲 -- AAAA0000 欧洲 -- AAAA000 澳大利亚 -- 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"){
}
});
任何提示将不胜感激。
解决方案
您可以在 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)
}
})`
^[AZ]{n} - 匹配大写字母的前 n 个字符 [0-9]{n} - 匹配 n 个数字字符
推荐阅读
- spring - 如何从控制器传递视图?
- flutter - 如何在 Flutter 上进行远程更新
- pandas - 将输出保存在 CSV 中,而不会丢失 pandas 数据框中该 CSV 上的先前数据
- statistics - SAS 中的列分析
- non-linear-regression - 具有缩放 t 分布的 GAMM:为什么我的残差和拟合值不能与观察值相加?
- javascript - JS onEventListener 一起运行两个独立的函数
- python - 在 Spyder 中安装 Pandas
- c++ - C++/libpng - fclose() 在调用 png_write_png() 后“触发断点”
- javascript - 没有重载将此调用与样式化组件匹配
- microsoft-graph-api - ngrok 被 Fortinet FortiGuard 阻止