日々ログ

東京でSEやっている人のブログです。

【jQuery】入力値チェックと重複チェックのコード

やりたいこと

フロントエンド上で複数存在するテキストボックスの値をリストで取得して、

入力内容に重複がないかのチェックをしたい。

また、入力内容はA~Zまでしか入力できないようにしたい。

画面イメージ

f:id:mat_kenny:20200606113200p:plain

※テキストボックスには、valueAreaというクラスを割り当ててます。

 

ソースコード

<script type="text/javascript">
var arrays = [];
//画面表示時のテキストボックスの状態を取得する。
jQuery(document).ready(function () {
$(".valueArea").each(function () {
arrays.push($(this).val());
});
});

//テキストボックスリストの状態を更新する。
$(".valueArea").keyup(function (e) {
var arrs = [];
$(".valueArea").each(function () {
arrs.push($(this).val());
});
arrays = arrs;

//A-Zまでしか入力できないようにするスクリプト
num = $(this).val();
if (num != "") {
//A-Z以外の値が入力されていないかをチェックする。
if (num.match(/^[A-Z]+$/) == null) {
alert("キーはA~Zの値を使用してください");
$(this).val("");
}
//直近入力した値がテキストボックスリストに存在するかをチェックする。
else if (daburiCheck(num, arrays)) {
alert(num + "はすでに使っています");
$(this).val("");
}

}
});
function daburiCheck(num, arrays) {
count = 0;
for (var i in arrays) {
if (num == arrays[i]) {
count++;
}
}
if (count >= 2) {
return true;//重複している
}
else {
return false;//重複していない
}
}

</script>