正規表現でデータをチェック

正規表現を使うと、入力されたデータが適切であるかどうかチェックすることができます。前回までのデータチェックでは未入力かどうかで判断していましたが、たとえ入力されている場合でも、数字であるべきところに文字が入っていた場合はエラーの原因になります。

あらかじめエラーの原因を取り除くことでプログラムがシンプルに書けます。

【1】「sample010.js」を以下のように更新してください。コピーして貼り付けてもかまいません。

var database;
var txtPrefCd;
var txtPrefName;

onload = init;
onunload = dbClose;


function init() {
  //初期設定をする関数
  txtPrefCd = document.getElementById("txtPrefCd");
  txtPrefName = document.getElementById("txtPrefName");

  txtPrefCd.onblur = function (){blur(this);}
  txtPrefCd.onfocus = function (){focus(this);}
  txtPrefName.onblur = function (){blur(this);}
  txtPrefName.onfocus = function (){focus(this);}
  document.getElementById("btnInsert").onclick = function (){dataInsert();}
  document.getElementById("btnUpdate").onclick = function (){dataUpdate();}
  document.getElementById("btnDelete").onclick = function (){dataDelete();}
  document.getElementById("linkMaxCd").onclick = function (){return maxCd();}


  dbConnect();
  dataDisplay();
}


function dbConnect() {
  //データベースに接続する関数
  database = new ActiveXObject("ADODB.Connection");
  database.Open("Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\\SampleDB010.mdb;");
  alert("データベースに接続しました。");
}


function dbClose() {
  //データベースを切断する関数
  database.Close();
  database = null;
  alert("データベースを切断しました。");
}


function focus(obj){
  obj.style.backgroundColor = "#ffff00";
}


function blur(obj){
  obj.style.backgroundColor = "#ffffff";
}


function dataDisplay() {
  //データを表示する関数
  var mySql = "select * from T01Prefecture order by PREF_CD";
  var recordSet = database.Execute(mySql);

  var tempText = "";
  document.getElementById("dataDisplay").value = "";

  while (!recordSet.EOF){
    tempText = tempText + recordSet(0) + ":" + recordSet(1) + "\n";
    recordSet.MoveNext();
  }

  document.getElementById("dataDisplay").value = tempText;
  recordSet.Close();
  recordSet = null;
}


function dataInsert() {
  //データを追加する関数
  try{
    if(dataCheck(1)){
      var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
      sqlDisplay(mySql);
      database.Execute(mySql);
      dataDisplay();
      alert("追加しました。");
    }
  }catch(error){
    alert(error.number + "\n" + error.description);
  }
}


function dataUpdate() {
  //データを更新する関数
  if(dataCheck(1)){
    var mySql = "update T01Prefecture set PREF_NAME ='" + txtPrefName.value + "' where PREF_CD = " + Number(txtPrefCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    dataDisplay();
    alert("更新しました。");
  }
}


function dataDelete() {
  //データを削除する関数
  if(dataCheck(0)){
    var mySql = "delete from T01Prefecture where PREF_CD = " + Number(txtPrefCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    dataDisplay();
    alert("削除しました。");
  }
}


function sqlDisplay(_mySql) {
  //SQLを表示する関数
  document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}


function dataCheck(flag){
  //データをチェックする関数
  var tempStr = "は必ず入力してください。";
  if (txtPrefCd.value == "") {
    alert("PREF_CD" + tempStr);
    return false;
  }
  if (txtPrefCd.value.match(/[^0-9]/)) {
    alert("PREF_CDには半角数字を入力してください！");
    txtPrefCd.focus();
    return false;
  }
  if (flag == 1 && txtPrefName.value == "") {
    alert("PREF_NAME" + tempStr);
    return false;
  }
  return true;
}


function maxCd(){
  //最大値を取得する関数
  var mySql = "select max(PREF_CD) from T01Prefecture";
  var recordSet = database.Execute(mySql);
  txtPrefCd.value = recordSet(0) + 1;
  txtPrefName.focus();
  return false;
}

【2】保存したら sample010.html をダブルクリックしてWebブラウザで開きます。
★sample010.htmlとsample010.jsは必ず同じフォルダ内に置いてください。


【3】PREF_CDにわざと「12あ345」のような文字を含んだ値を入力して、「追加」ボタンをクリックします。




【4】数字ではない値が含まれているため、メッセージが表示されました。





確認したら「OK」をクリックします。


【5】正しい値の場合は追加されます。




【解説】

PREF_CDのデータが適当かチェックするタイミングはいろいろあります。PREF_CDから抜け出す時でもかまいません。今回は追加、更新、削除の各ボタンをクリックした時に呼び出されるdataCheck()を使います。

とても簡単で関数dataCheck()にif文を一つ加えただけです。このif文はPREF_CDが未入力の場合は実行されません。上のif文にreturnがあるからです。

  if (txtPrefCd.value.match(/[^0-9]/)) {
    alert("PREF_CDには半角数字を入力してください！");
    txtPrefCd.focus();
    return false;
  }

if文の条件式が関数match()と正規表現でできています。
if (txtPrefCd.value.match(/[^0-9]/)) {省略}

match()はマッチングを行い、カッコ内の条件でマッチしたかどうかをtrueかfalseで返す関数です。[^0-9]の部分が正規表現で、「数値以外の文字」を意味しています。

txtPrefCd.valueに数値以外の文字が含まれているとき、match（マッチ）しますので、条件式はtrueになります。

例えば「12あ345」は[^0-9]にマッチします。数字以外が含まれているからです。ちなみに[\D]でも同じ意味になります。「12345」だとマッチしません。

正規表現はとても強力で、よくmatch()やreplace()などの関数と一緒に使われます。replace()は置換に使う関数です。

また正規表現はとても奥が深く、正規表現の説明だけで1冊の本になるほどです。電話番号やメールアドレスに適切なデータかどうかチェックすることもできます。正規表現をマスターするとプログラムの幅がグッと広がります。まずよく使うものから少しずつおぼえていくと良いでしょう。