エンジニアの将来って?

現在6年目の元COBOL現Javaエンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

【JavaScript】テキストボックスの中身をmatchを使って判定

こんにちは。たいら(@tairaengineer2)です。
今回の記事はJavaScriptのアウトプット記事です。
matchメソッドを使って判定させるプログラムを作りました。

プログラムの概要

作ったのはhtml、jsを1つずつ作りました。

テキストボックスに文字を入力。
ボタンを押すとテキストボックスの中身が数字か英字かどうかをalertするプログラムです。

フォルダ構成

フォルダ構成は下記の通りです。

f:id:Tairax:20180804163926p:plain

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>matchサンプル</title>
		<script type="text/javascript" src="../js/MatchSample.js"></script>
	</head>
	<body>
		<form action="" id="formId">
			<input type="text" id="matchText">
			<input type="button" id="matchButton" value="matchテスト" onclick="matchTest()">
		</form>
	</body>
</html>

JavaScript

function matchTest() {
	// テキストボックスに入力された値を取得
	var str = document.forms.formId.matchText.value;

	// 入力されたか判定
	if (str == '') {
		alert('何も入力されていません');
	}
	// 数字(半角全角含む)が入力されたか判定
	else if(str.match(/^[0-90-9]+$/)) {
		alert('数字が入力されました')
	}
	// 英字(小文字大文字含む)が入力されたか判定
	else if(str.match(/^[a-zA-Z]+$/)) {
		alert('英字が入力されました')
	}
}

実行結果

最初の画面はこんな感じです。

f:id:Tairax:20180804164349p:plain

スタイルを特にいじってないのでシンプルな画面です。
テキストボックスに色々入力してalertさせます。

何も入力しなかった場合

f:id:Tairax:20180804164349p:plain

何も入力しない状態で「matchテスト」ボタンを押します。

f:id:Tairax:20180804165139p:plain

何も入力していないとalertしてくれました!

数字を入力した場合

テキストボックスに数字のみを入力します。

f:id:Tairax:20180804164551p:plain

「matchテスト」ボタンを押します。

f:id:Tairax:20180804164757p:plain

数字が入力されたととalertしてくれました!

英字を入力した場合

テキストボックスに英字のみを入力します。

f:id:Tairax:20180804165410p:plain

「matchテスト」ボタンを押します。

f:id:Tairax:20180804165533p:plain

英字が入力されたととalertしてくれました!

まとめ

いかがでしたか?
matchメソッドのを使って色々判定させてみました。
ただ、このプログラムには修正すべき個所があります。
それは

  • ひらがな、カタカナを判定できない
  • 数字と英字を混ぜると判定できない

これは次回の課題にしたいと思います!
皆さまのご参考になれば幸いです。
ではでは~(・ω・)ノシ