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

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

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

  2. JavaScript

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

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

  3. JavaScript

    【TweenMax.js】アニメーション終わりに関数を呼び出す!

    最近はWebアプリでアニメーションが必要になったときに、「Twen…

  4. JavaScript

    【TweenMax.js】回転アニメーションも楽々!

    以前も記事に書いたアニメーション用のJavaScriptライブラリ…

  5. JavaScript

    JavaScriptでコメントは「/* */」をなるべく使わないようにしたい

    コメントには囲った部分をすべてコメントにする「/* */」と、1…

  6. JavaScript

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

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

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 懐かしい!!カードダスSD戦国伝!!
  6. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!

アーカイブ

  1. 読書

    今読んだら泣く絵本の1冊『100万回生きたねこ』がドキュメンタリー映画になってた…
  2. iOS

    iOSアプリ開発に必須の「Provisioning Profile」を取得する!…
  3. 日常

    ブラックボックスの中で
  4. 日常

    『五感刺激のブランド戦略』
  5. micro solutionのガラスシート

    プロダクト

    ついにiPhone7の最高のフィルムを見つけた!Micro Solutionのガ…
PAGE TOP