0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

正規表現についてjQuery

Last updated at Posted at 2020-03-28

アプリ開発の中でuser登録の際バリデーションに合わせviewで使用したjQueryの正規表現をメモします。
今回、 ! .match を使い正規表現で無い場合は使いerrorを返し、
errorの場合ブロックを表示したり非表示したり枠の色変えたりというものです。

#例)メールアドレス

.js
$(function(){
  $('.email').on('blur',function(){
    let error;
    let value = $('.email').val();
   //valueがhoge@hoge.hogeの型でない場合error
    if(!value.match(/.+@.+\..+/g)){
      error = true;}
   //もしerrorなら下記ブロックを表示もしくは非表示したり枠の色変えたり
    if(error){
      $('.email-error').show();
      $('.email').css({'border':'1px solid #ea352d'});
    }
    else{
      $('.email-error').hide();
      $('.email').css({'border':'1px solid #ccc'});
    }
  });
});

#今回使用した正規表現たち
メールアドレス hoge@hoge.hogeの型
value.match(/.+@.+\..+/g))
パスワード 7文字以上半角英数含む
value.match(/^(?=.*?[a-z])(?=.*?\d)[a-z\d]{7,}$/i)
名前 全角ひらがな漢字
value.match(/^[あ-けー-龥 ]+$/)
名前 全角カタカナ
value.match(/^[ァ-ンヴー]*$/)
#使用頻度の多そうな正規表現たち
半角数字が含まれる
value.match(/\d/);
半角数字のみ
value.match(/^\d+$/);
英字が含まれる
value.match(/[a-zA-Z]/);
英字のみ
value.match(/^[a-zA-Z]+$/);
ひらがなのみ
value.match(/^[\u3040-\u309f]+$/);
カタカナのみ
value.match(/^[\u30a0-\u30ff]+$/);
半角カタカナのみ
value.match(/^[\uff65-\uff9f]+$/);
全角のみ
value.match(/^[\u3040-\u30ff]+$/);
URLかどうか(半角英数字)
value.match(/^(https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)$/)

他にも調べる色々あると思いますし、言語によって?正規表現が違ったりすると思いますので、
ちらっと参考程度にお手柔らかに見て頂ければと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?