読者です 読者をやめる 読者になる 読者になる

リスを倒す 『初めてのPHP,MySQL,JavaScript&CSS』

『初めてのPHP,MySQL,JavaScript&CSS』勉強奮闘記

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

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


さてさて、リス再開します。
前回はサインアップフォームの作成をおこないました。
f:id:taro-blog2323:20161222122546p:plain

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

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


以下のコードを、前回作ったフォームに組み込みます。
f:id:taro-blog2323:20161222124128p:plain

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

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