JavaScriptでログインフォームの簡単な入力値チェックを行いたい

jQueryなどを使わず簡単な入力チェックを行う方法。
今回は未入力チェックだけですが、フォームの要素へのアクセス方法などを紹介します。

  

この記事は1年以上前に書かれたものです。
情報が古い可能性があります。

以前は良く使われていたdocument.form.name.valueみたいな書き方は古い書き方なのでやめましょうね。

デモページ

ソースコード

Login.js

/*******************************************************************
 * ログインクラス
 ********************************************************************/

var Login = {};

/** 
 * 超簡易ログイン認証
 * @param loginForm formエレメント
 * @return 成功時true,失敗時false
 */
Login.doLogin = function doLogin(loginForm) {

	//空チェック
	if(loginForm.username.value == '') {
		return Login.doError('ユーザー名を入力してください。');
	}
	if(loginForm.password.value == '') {
		return Login.doError('パスワードを入力してください。');
	}

	//エラーなし
	return true;
}

/**
 * エラー時の動作
 * @param msg エラーメッセージ
 * @return falseを返す
 */
Login.doError = function doError(msg) {
	alert(msg);
	return false;
}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<title>Form Auth Example</title>
		<script type="text/javascript" src="Login.js"></script>
	</head>
	<body>
		<form id="loginForm" action="" method="post" onsubmit="return Login.doLogin(this)">
			<p>UserName : <input type="text" name="username" /></p>
			<p>Password : <input type="password" name="password" /></p>
			<p><input type="submit" value="ログイン" /></p>
		</form>
	</body>
</html>
  

共有やブックマークなど