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. about_debug-4.jpg

    JavaScript

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

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

  2. QueryString.jpg

    JavaScript

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

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

  3. chrome_touchevents.jpg

    JavaScript

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

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

  4. oncomplete_function.jpg

    JavaScript

    【TweenMax】「onComplete」で引数を使う方法

    TweenMaxの「onComplete」で引数を使いたい場合って…

  5. trycatch.jpg

    JavaScript

    JavaScriptでエラーが起っても固まらないように「try-catch」する

    HTML5とJavaScriptでこねこねしてWebアプリを作って…

  6. fb022d1ac056d555673c17937de7f431.png

    JavaScript

    強力なアニメーション用のJavaScriptライブラリー「TweenMax.js」が便利!

    jQueryでもアニメーションはできるのですが、それよりも表現力豊…

最近の記事

  1. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  2. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  3. コミックのイラストが新鮮だった!『MARVEL展』
  4. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  5. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. 日常

    香港ロケ1 5/17
  2. 日常

    BATH
  3. 日常

    エネループがやった
  4. Evernoteプレミアムをできるかぎり安く利用する方法!

    サービス

    Evernoteプレミアムをできるかぎり安く利用する方法!
  5. 夏のグッドデザイン!「金鳥の蚊取線香」

    プロダクト

    夏のグッドデザイン!「金鳥の蚊取線香」
PAGE TOP