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

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

＜第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("メールアドレスが正しくありません");
     }
   }

■ より高度なデータチェック

フォームにおけるデータの入力は複数の入力フィールドにまたがっています。そうした各フィールドの入力チェックを行うスクリプトを作成します。

少し複雑になるのは、先ほどのメールアドレスの入力を、より厳密にチェックする構文です。ここでは、メールアドレスのドメイン名まで細かくチェックし、その妥当性を検証します。

特に、メールアドレスでは「@」という文字の前後に文字列を持ち、最後の文字列がドメイン名となります。入力されたデータと、スクリプトで設定した正規表現との差を検証して、入力されたデータが正しいかどうかをチェックします。

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号」を参照してください。）

PageTop / Home / 目次

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