tuqulore/vue-3-practices

パスワードチェッカーの改善

knokmki612 opened this issue · 4 comments

パスワードの強度のロジックを変える(初期状態:文字列長のみ;他には記号を含むか否か、英数字を含むか否かなど)

これは初期状態からひととおりつくってしまった。

また、debounceの導入がトリッキーな書き方になってしまった。Compositionになっているライブラリを使ったほうがいいかも

Originally posted by @knokmki612 in #184 (comment)

具体的には以下の箇所

const props = defineProps({
  password: String,
});
// プロパティからリアクティブな値としてpasswordだけを取り出す
const { password: propsPassword } = toRefs(props);
const password = ref("");
// props.passwordを監視して変更を間引く
watch(
  propsPassword,
  debounce(1000, () => {
    password.value = propsPassword.value;
  }),
);

Compositionになっているライブラリを使ったほうがいいかも

throttle-debounce を Composition Composable 関数にするサンプルやハンズオンがあっていいのかも

Compositionになっているライブラリを使ったほうがいいかも

throttle-debounce を Composition Composable 関数にするサンプルやハンズオンがあっていいのかも

VueUseにあった

パスワード強度はチョコっとプラスパスワード|IPA 独立行政法人 情報処理推進機構を参考に設定すれば良さそう