初心者のためのホームページ作り 第63号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

<第63号> 今週のおさらい
                   毎週金曜日配信 What's New 2003/8/22
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   ■ JavaScript講座 第12回 --- フォームの入力をチェックする
JavaScript講座 --- フォームデータをチェックする
フォームでは、ユーザからアンケートを取ったり、問い合わせなどで利用されます。しかしながら、ユーザによっては各入力フィールドど誤ったデータ、あるいは何も入力されないなど正規なデータにならない場合が多々あります。
今回は、そのような誤りをチェックして、もう一度データ入力をやり直してもらうスクリプトを学びます。
簡単なデータチェック
最初に、ごく簡単なデータチェックの関数を作成します。
JavaScriptの、Stringオブジェクトが持つ indexOfメソッドを利用して、ある特定の文字の有無を検索して、もし、間違っているようでしたら警告のウィンドウを表示して、もう一度入力をやり直してもらうプログラムを作ります。
もし、データが入力されない場合には、そのデータには「null(ヌル)コード」が与えられ、何もないと判断されます。
当然、何も入力されない場合には、「正しいデータ」ではないわけですから、警告を出して、もう一度入力をしてもらうようにします。
indexOfメソッドとは、文字列から指定した位置の文字を検索、参照します。一致した文字列がなかった場合には、「-1」 を返します。なお、検索対象となる文字列に、変数を指定することも可能です。
返された値が「-1」 かどうかを条件にして if構文を作ると、簡単に入力された値が正しいかどうかをチェックできます。
  function che(mailad) {
   if (mailad == ""){
    alert("メールアドレスを入力してください");
    }
     else if (maillad.indexOf("@", 0) < = 0){
     alert("メールアドレスが正しくありません");
     }
   }

メールアドレスのチェック (詳しい構文は、今週のメールマガジン「第63号」を参照してください。)

より高度なデータチェック
フォームにおけるデータの入力は複数の入力フィールドにまたがっています。そうした各フィールドの入力チェックを行うスクリプトを作成します。
少し複雑になるのは、先ほどのメールアドレスの入力を、より厳密にチェックする構文です。ここでは、メールアドレスのドメイン名まで細かくチェックし、その妥当性を検証します。
特に、メールアドレスでは「@」という文字の前後に文字列を持ち、最後の文字列がドメイン名となります。入力されたデータと、スクリプトで設定した正規表現との差を検証して、入力されたデータが正しいかどうかをチェックします。
var emailStr = theForm.email.value
var emailPat=/^(.+)@(.+)$/
var specialChars="\\(\\)<>@,;:\\\\\\\"\\.\\[\\]"
var validChars="\[^\\s" + specialChars + "\]"
var quotedUser="(\"[^\"]*\")"
var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/
var atom=validChars + '+'
var word="(" + atom + "|" + quotedUser + ")"
var userPat=new RegExp("^" + word + "(\\." + word + ")*$")
var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$")
var matchArray=emailStr.match(emailPat)
この変数の設定では、正規表現とフォーマットを用意し、入力されたデータを検証するために様々な工夫と設定がされています。
RegExpオブジェクト、Stringオブジェクトを利用して、入力されたデータと、あらかじめ設定したメールアドレスのフォーマットを比較し、その妥当性を検証します。

フォームデータのチェック (詳しい構文と解説は、今週のメールマガジン「第63号」を参照してください。)



Valid XHTML 1.1! Copyright(C) 2002-2003 初心者のためのホームページ作り臨時制作委員会 wfb-org@jcom.home.ne.jp