JavaScriptによるIF文の関数化（同じIF文を２回使いたい）

###前提・実現したいこと
現在趣味で、JavaScriptとHTMLを使用してユーザー情報を管理するサイト開発をしているの（詳しくはColdfusion）ですが、その際のJavaScriptについての質問です。

大まかではありますが作ったサイトの説明です。
まずメイン画面に、登録しているユーザーの一覧、会員番号をクリックすると、その会員の情報の閲覧、更新及び削除の画面。
ユーザー登録の画面を作成しました。

ユーザー情報を更新及び登録の際のテキストボックスには入力のチェックルーチン？（フリガナはカタカナか、電話番号は数字なのか。）を通しています。私は更新と追加の画面をモードで管理しているので、1つのクラスで管理しています。
###発生している問題・エラーメッセージ

モード管理のため、長いチェックルーチンを２回張るのは不格好だと思いました。
なので、if文の関数化？はできないでしょうか？

###該当のソースコード

function check(){
			var flag = 0;
			// 設定開始（必須にする項目を設定してください）
			if(document.form.name.value == ""){ 
				alert("氏名を入力してください");
				flag = 1;
			}else if(document.form.katakana.value.match(/[^ァ-ン]/)){//フリガナがカタカナかチェック
				alert("フリガナはカタカナで入力してください");
				flag = 1;
			}else if(document.form.mail.value.match(/[^a-zA-z?s]+$/)){//メールアドレスに全角が使われていないかチェック
				alert("メールアドレスを正しく入力してください");
				flag = 1;
			}else if(document.form.yubin.value.match(/[^0-9]/)){ //郵便番号数字チェック
				alert("郵便番号は数字で入力してください");
				flag = 1;
			}
}
function koushin(){
	check();
	if(flag == 0){
		document.frm.method = "post";
		document.frm.action = "userupdate.cfm";
		document.frm.submit()
	}
}

このソースコードのユーザー登録ver.もあり。
なお、チェックが長いため、ある程度は割愛しました。

###試したこと
function koushin内でのfunction check(クロージャー？)では成功しました。
###補足情報(言語/FW/ツール等のバージョンなど)
言語は前述した通り、JavaScriptになります。
おおもとはcoldfusion内でのJavaScriptになります。

行動規範の内容に同意します

回答2件

配列

元のコードを尊重するなら配列を使えば良いですが、

JavaScript
1var tokens = [['name', /^$/, '氏名を入力してください'], ['katakana', /[^ァ-ン]/, 'フリガナはカタカナで入力してください'], ['mail', /[^a-zA-z?s]+$/, 'メールアドレスを正しく入力してください'], ['yubin', /[^0-9]/, '郵便番号は数字で入力してください']];
2
3for (var i = 0, l = tokens.length; i < l; ++i) {
4  // 処理
5}

pattern属性

正規表現によるバリデーションを行うなら、input要素のpattern属性を使うほうが有用だと思います。

HTML5 で優れたフォームを作成する - HTML5 Rocks

HTML
1<input type="text" name="name" pattern="^[\s\S]+$" data-errormessage="氏名を入力してください">

check 関数

変数 flag でフラグ管理されているようですが、返り値を Boolean 型 (true, false) にした方がスマートだと思います。
前述のpattern属性で実装する場合は、必要な時に自動的にバリデーション処理が行われるので能動的にチェック処理を走らせる必要はありませんが、カスタムエラーメッセージの為に setCustomValidity を事前実行する必要はあります。

document.form.katakana

JavaScript
1 }else if(document.form.katakana.value.match(/[^ァ-ン]/)){//フリガナがカタカナかチェック

document.form.katakana のように名前で参照するのは古い方法なので、止めた方が無難です。
下記手法をお勧めします。

getElementById
document.forms
document.querySelector
HTMLFormElement#elements

Re: Yoshino.M さん

投稿2017/05/24 04:30

編集2017/05/24 04:52

think49

総合スコア18162

Yoshino.M

2017/05/24 07:06

なるほど！配列に格納という考えはすごいです。質問投稿後、パターンでもやってみましたが成功には至らず・・・そうですね！確かにbooleanの方がパッと見わかりやすいかもですね！ documentが古いといわれてしまうと、最新のやり方がわからず、折角理解してきたのを逃しそうなので、とりあえず今はこのままでいきたいと思います！しかし、いつまでも古いやり方でいるわけにもいかないので、もし宜しければ、お手すきの際に手ほどきをしていただけると幸いです。

行動規範の内容に同意します

ベストアンサー

flag が返っていないのが問題です。

JavaScript
1function check(){
2    var flag = 1;
3    // 設定開始（必須にする項目を設定してください）
4    if(document.form.name.value == ""){ 
5        alert("氏名を入力してください");
6        flag = 0;
7    }else if(document.form.katakana.value.match(/[^ァ-ン]/)){//フリガナがカタカナかチェック
8        alert("フリガナはカタカナで入力してください");
9        flag = 0;
10    }else if(document.form.mail.value.match(/[^a-zA-z?s]+$/)){//メールアドレスに全角が使われていないかチェック
11        alert("メールアドレスを正しく入力してください");
12        flag = 0;
13    }else if(document.form.yubin.value.match(/[^0-9]/)){ //郵便番号数字チェック
14        alert("郵便番号は数字で入力してください");
15        flag = 0;
16    }
17    return flag;
18}
19function koushin(){
20    if(check()){
21        document.frm.method = "post";
22        document.frm.action = "userupdate.cfm";
23        document.frm.submit()
24    }
25}