jsでパスワードのvalidationのようなものを書いてみた

ちょっとしたvalidationのようなものを書いてみたので、備忘録として残しておきたい。

前提

HTMLはシンプルに

<input type="password" id="passwordInput"/>

こんなかんじの想定です。
あとjs上での下処理は

let passwordText = document.getElementById('passwordInput').value;

とします。

文字数の確認

passwordの文字が 8文字以上 で良しとしたい場合の想定です。 これはシンプルにlengthで取れますね

if(passwordText.length < 8){
  // 何らかのエラー処理
}else{
  // 正常時の処理 
}

HTMLタグのmaxlength

そういえばHTML5の仕様でタグ上に記載することができますね。

<input type="password" id="passwordInput" maxlength="8"/>

こうすることでjs側での処理は不要になりますね。

同じ文字がいないかどうか

aa や 11 みたいに連続した文字がいた場合にエラーとしたいときのロジックです。

let passwordTexts = passwordInput.split('');
let previousCharacter = '';
let conuter = 1;
let hasSameCharacter = passwordTexts.some((character) => {
  if(character === previousCharacter){
    conuter++;      
  }else{
    previousCharacter = character;
    conuter = 1;      
  }
  return conuter === 2
});
if(hasSameCharacter){
  // エラー処理
}

特定の文字入力があるかどうかの判定

今回の想定では英字と数字、どちらも入ってるかどうかチェックするというものです。

let strMutcher = passwordText.match(/[a-z]/gi);
let numMutcher = passwordText.match(/[0-9]/gi);
if(strMutcher === null || numMutcher === null){
 // エラー時処理等
}

match でokだった場合は配列が返ってくるので、できれば .length > 0 あたりで判定したいところなのですが、
NGだった場合にnullしか返してこないので上記のような書き方をしました。
(個人的にもう少し改良の余地はあるように思える)
(正規表現がちょっと適切ではない気がするので、もっと勉強が必要)

HTMLタグで正規表現

<input type="password" pattern="^[0-9A-Za-z]+$">

と、いったかんじでタグ上でも正規表現を用いてチェックすることができるようです。 www.htmq.com

ちょっとしたポップアップも出て、便利ですね。
ただしこれ、formタグとセットで使わなければいけないので(ポップアップが出るのもきっとsubmitされるとき)
ページの作り方によっては使いにくいかもしれません。

余談

HTMLやjsでvalidationをする方法を上に書きましたが、結局クライアント側ではどうとでもできるので、本格的な処理はやはりjsで書かなければいけませんね。

あとはHTMLとjs、双方向からできるにしても、どの処理がどっちで担当しているか、というのがごちゃ混ぜになると管理が大変になると思うので、 個人的にはある程度jsに寄せたいなと思う派です。

以上、備忘録でした