16-2. JavascriptとPHPによる検証とエラー処理②フォームフィールドの検証

更新が滞っておりすみません。。。
ちと遠いところにいたり（すごくいい経験だった）、最後のふんばりをしたりで
ちょっと更新ができずにおりました。
とりあえず、ようやく無事全うすることができました。。。
という言い訳。

さてさて、リス再開します。
前回はサインアップフォームの作成をおこないました。

次は、フォームフィールドの実際の検証を行う6つの関数を作成します。
ここに示したコードを、前に作成したvalidate.htmlに追加します。
（前回つくったもののscriptタグ間に追加）

【目次】
1-1. フォームフィールドの検証の作成
　　1-2. 名前の検証（validateForename関数）
　　1-3. 名字の検証（validateSurname関数）
　　1-4. ユーザー名の検証（validateUsername関数）
　　1-5. パスワードの検証（validatePassword関数）
　　1-6. 年齢の検証（validateAge関数）
　　1-7. メールアドレスの検証（validateEmail関数）

1-1. フォームフィールドの検証の作成

以下のコードを、前回作ったフォームに組み込みます。

詳細を順にみていきまそー

1-2. 名前の検証（validateForename関数）

function validateForename(field) {
if (field == "") return "No Forename was entered.\n"
return ""
}

validateForename関数は、validate関数から渡される名前（forename)の値を、fieldパラメータで受け取る関数です。
この値が空のストリングの場合には、エラーメッセージを返します。そうでない場合は、間違いが見つからなかったことを表す空のストリングを返します。
ユーザーがスペースを入力した場合、空に違いないのですが、validateforenameにはスペースが渡されます。
これは、空かどうかを調べる前にフィールドからホワイトスペースを削除し、正規表現を使ってフィールドをホワイトスペース以外のもので埋めるステートメントを追加することで修正できます。

1-3. 名字の検証（validateSurname関数）

function validateSurname(field) {
if (field == "") return "No Surname was entered.\n"
return ""
}

validateSurname関数は、与えられた名字が空のストリングの場合のみエラーを返すという点で、validateForename関数とほとんど変わりません。

1-4. ユーザー名の検証（validateUsername関数）

function validateUsername(field) {
if (field == "") return "No Username was entered.\n"
else if (field.length < 5)
return "Usernames must be at least 5 characters.\n"
else if (/[^a-zA-Z0-9_-]/.test(field))
return "Only a-z, A-Z, 0-9, - and _ allowed in Usernames.\n"
return ""
}

validateUsernameはもっと複雑で、パスさせる文字をa-z、A-Z、0-9（大文字小文字のアルファベットと数字）と、_、－に限る必要があり。さらにユーザー名として少なくとも5文字の長さを求めます。
if...elseステートメントではまず、fieldが値で埋められていなかった場合にエラーを返すことから始めています。

1-5. パスワードの検証（validatePassword関数）

function validatePassword(field) {
if (field == "") return "No Password was entered.\n"
else if (field.length < 6)
return "Passwords must be at least 6 characters.\n"
else if (! /[a-z]/.test(field) ||
! /[A-Z]/.test(field) ||
! /[0-9]/.test(field))
return "Passwords require one each of a-z, A-Z and 0-9.\n"
return ""
}

validatePassword関数では、fieldが空かどうかを調べ、空の場合にはエラーを返しています。
そしてパスワードの長さが6文字より短い場合にエラーメッセージを返しています。
ここではパスワードに小文字、大文字、数字が少なくとも1つ含まれていることを要件とするので、その各要件についてtestメソッドを1回、合計で3回呼び出しています。そのいずれか1つでもfalseを返した場合には、パスワードの要件が満たされていないことになるので、エラーメッセージを返します。

1-6. 年齢の検証（validateAge関数）

function validateAge(field) {
if (isNaN(field)) return "No Age was entered.\\n"
else if (field < 18 || field > 110)
return "Age must be between 18 and 110.\n"
return ""
}

validateAge関数は、fieldが数値でない場合（isNaN関数を呼び出して）と、入力された年齢が18より小さいか、または100より大きい場合にエラーメッセージを返します。

1-7. メールアドレスの検証（validateEmail関数）

function validateEmail(field) {
if (field == "") return "No Email was entered.\n"
else if (! 0) &&
(field.indexOf("@") > 0">*1 ||
/[^a-zA-Z0-9.@_-]/.test(field))
return "The Email address is invalid.\n"
return ""
}

ここではまず、何かが実際に入力されているかどうかを調べ、入力されていない場合にエラーメッセージを返します。
入力されている場合にはJavascriptのindexOF関数を2回呼び出します。
最初のチェックでは、どっとが2文字以降にあり、次のチェックでは@も2文字め以降にあることを確認しています。
この2つのチェックが満たされた場合にはtestメソッドを使って許可されない文字がフィールドに含まれているかどうかが調べられます。
これらのチェックのどれかに通らないとエラーメッセージが返されます。

いじょーーーー
こえがでねええええええ

*1:field.indexOf(".") > 0) && (field.indexOf("@") > 0