JavaScriptでのバリデーション

こんにちわ、ゆきねこです。

もうそろそろ社会人２年目が終わるので、昨年に比べて成長できたかなーと考えると、これで合ってるかなという不安がなくなる程度には経験を積んだかなと思います。

昨年はSIerの元で作られたプログラムの保守がメインって感じでしたが今は完全に新規開発を自信を持ってやっている感じです。

バリデーション

ということで、現在jsでバリデーションを実装しているのですが、結構いい感じのバリデーションができたんじゃないかなと思って紹介します。

$(function(){
	// 値の設定
	var userId = "";
	var password = "";
	var confirmPassword = "";
	var email = "";

	// エラーメッセージ用の配列
	var errorMsgArray = [];

	$("#checkBtn").click(function(){
		do{
			// 値の設定
			getData();

			// バリデーションチェック
			errorMsgArray = [];
			userIdCheck();
			passwordCheck();
			emailCheck();
			if(errorMsgArray.length > 0){
				break;
			}
			break;
		}while(0);
		// エラー処理
		if(errorMsg.length > 0){
			// エラー処理
			alert(errorMsg);
		}
	});

	// 値の設定
	function getData(){
		userId = $("#userId").val();
		password = $("#password").val();
		confirmPassword = $("#confirmPassword").val();
		email = $("#email").val();
	}

	/**
	 * バリデーションチェック
	 */
	// ユーザIDチェック
	function userIdCheck(){
		if(userId.length <= 0){
			errorMsgArray.push("ユーザIDを入力してください。");
		}
	}
	// パスワードチェック
	function passwordCheck(){
		if(password.length <= 0){
			errorMsgArray.push("パスワードを入力してください。");
		}
		if(password != confirmPassword){
			errorMsgArray.push("パスワードと確認用パスワードが一致しません。");
		}
	}
	// メールアドレスチェック
	function emailCheck(){
		if(email.length <= 0){
			errorMsgArray.push("メールアドレスを入力してください。");
		}
	}
});

ボタンを押したらgetData()でスコープ広めの変数に入力値を設定していきます。

その後、スコープ広めのエラーメッセージを格納する配列を初期化したら~Check()でバリデーションして、エラーだったらエラーメッセージを配列に格納していきます。

バリデーションが終わって、配列にエラーメッセージが格納されていたら正常処理を抜けてエラー処理を走らせて終わりです。

個人的に可読性を重視しているので、メイン処理はなるべく関数とかで切り分けて簡素にするように意識してます。

今回はAPIを複数叩く必要があったのでフロント側でバリデーションしましたが

、フロントとバックどっちでやるのがいいんですかね。

ちなみに完成した時にめっちゃテンション上がりました笑