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

web制作 Tags:

jQueryなどを使わず簡単な入力チェックを行う方法。

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

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

ソースコード

以前は良く使われていた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>
  

共有やブックマークなど

コメントは受け付けていません。