詰まった！jQueryの正規表現で文字数制限をかける方法

ぞす！げんきちです！＼＼\\٩( 'ω' )و //／／

「いや、誰だよ」って方は、下記リンクを見てやってください。

目次〜

「入力フォームを20文字以下に制限する」
詰まるまでの流れ
最終的にはこれでいけました。

f:id:www08056561815:20190223213744j:plain

ページ遷移する新規登録機能をJavascriptで実装しています。

現状だと最終ページのsubmitを押さないとバリデーションが効きません。

（何も入力していなくても、最終ページまではいけてしまう。）

JavaScriptでバリデーションをかけるために正規表現が必要になりました。

そこで詰まった内容です。

「入力フォームを20文字以下に制限する」

これを実現しようとします。

$('.member-info').find('#user_nickname').each(function(){
      let error;
      let value = ($(this).val());
      if(!value.match(/正規表現/)){
        error = true;
      }

正規表現にかかった場合に、変数errorの値をtrueにしようとしました。

詰まるまでの流れ

正規表現をググりました。

. 任意の1文字

// 10文字以下の半角数字の表現
[0-9]{,10}

ふっふっふ、分かったぞ。

if(!value.match(/.{,20}/))

これで20文字以上入力したらtrueになるはず。

console.log（error）

a を入力→true

aaaaaaaaaaaaaaaaaaaaa を入力→true

???

もう一度ググりました。

// 4文字以上、10文字以下の半角数字の表現
[0-9]{4,9}

試しにやってみました。

if(!value.match(/.{4,20}/))

これで4文字以下、20文字以上でtrueのはず。

console.log（error）

aを入力→true

aaaaaを入力→undefined

aaaaaaaaaaaaaaaaaaaaaを入力→undefined

4文字以上まではmatchで取れてる...?

なんてこったい／(^o^)＼

ここで詰まりました。

最終的にはこれでいけました。

    $('.member-info').find('#user_nickname').each(function(){
      let error;
      let value = ($(this).val());
      if(!value.match(/^.{0,20}$/)){
        error = true;
      }