JavaScript

正規表現で入力されたテキストが有効かをチェックする


テキストボックスに入力されたテキストが
整数かどうかをチェックします。

1
2
3
4
5
6
7
8
9
function checkTxt(event){
    var str = document.getElementById('txt_box').value;
    var regexp = /^-?d+$/;
    var output = document.getElementById('outputMesse');    if(regexp.test(str)){
        output.innerHTML = '';
    } else {
        output.innerHTML = '数値ではありません';
    }
}

2行目でテキストボックスから値を取得。
3行目で正規表現パターンを設定。
5行目で「test」メソッドを利用して、取得したテキストが正規表現パターンに当てはまっているかをチェックします。

基本的には定義する正規表現パターンを変えることで、いろいろ幅広く対応できるというわけ。この正規表現というやつがちょっと難しくてよくわかってませんが、こういうのがあると入力するユーザーは助かりますよね。

例として正規表現パターン部分を以下に。

1
2
3
4
5
//メールアドレスチェック
var regexp = /^[w-.]+@[w-.]+$/;
 
//URLチェック
var regexp = /^http(s)?://([w-]+).([w-.]+)/([w-./#]*)$/

▼基本から勉強するならコレ!

関連記事

  1. JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

  2. JavaScript

    Android端末のデフォルト・ブラウザでJavaScriptのデバッグをする方法

    Webアプリをデザインするときに必須となるのがJavaScript…

  3. JavaScript

    クエリーストリングを利用してWebページ間でデータを受け渡してみる

    「クエリーストリング」っていうのは以下のようなGoogleで検索し…

  4. JavaScript

    「offset」と「style」で取得する値が違う

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

  5. JavaScript

    「TweenMax.js」をビジネス利用のためのライセンス購入方法

    いつもJavaScriptのアニメーション部分でお世話になってる「…

  6. JavaScript

    CSSのプロパティをJavaScriptで指定する

    Elementオブジェクトのstyleプロパティでその要素に対し…

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. 日常

    自宅で寝袋
  2. プロダクト

    スタバの地域限定タンブラー、ドイツの「Hamburg」タンブラー
  3. 日常

    タイムアップ!
  4. JavaScript

    CSSのプロパティをJavaScriptで指定する
  5. 置くだけ充電

    プロダクト

    置くだけ充電!?
PAGE TOP