Vue中毒者がSvelteを使ってみる。【その2 フォームバリデーション】

今回やること

Svelteにてフォームバリデーションを実装する。

そもそもフォームバリデーションって?

サイトのログインページなどのフォームにて、特定の入力の条件を満たさなければボタンを押せないようにする仕組みです。

例としては以下のようなものがあります。

• メールアドレスとパスワードが入力されている場合のみボタンが押せる。
• メールアドレスの形式やとパスワードの文字数が条件を満たすかどうか。

今回実装するバリデーション

• メールアドレスが形式通りか
• パスワードが、数字、アルファベットの大文字、小文字の1文字ずつ以上含んでいる＆8～20文字か

Vueの場合

<template>
  <div id="form">
    <form>
      <div id="email">
        <label for="email">メールアドレス</label>
        <input type="email" name="email" v-model="email" 　id="email" />
      </div>
      <div id="password">
        <label for="password">パスワード</label>
        <input
          type="password"
          name="password"
          v-model="password"
          id="password"
        />
      </div>
      <div id="submit">
        <input type="submit" value="ログイン" v-bind:disabled="check" />
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: "",
      password: "",
    };
  },
  computed: {
    check: function () {
      //メールアドレスとパスワードの形式を満たす場合
      if (
        this.email.match(/[\w\d_-]+@[\w\d_-]+\.[\w\d._-]+/) &&
        this.password.match(
          /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]{8,20}$/
        )
      ) {
        return false;
      }
      //違う場合
      else {
        return true;
      }
    },
  },
};
</script>

Svelte ver

<script>
  let email = "";
  let password = "";
  let check = true;


  $: if (
    email.match(/[\w\d_-]+@[\w\d_-]+\.[\w\d._-]+/) &&
    password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]{8,20}$/)
  ) {
    check = false;
  }
  //違う場合
  else {
    check = true;
  }
</script>

<main>
  <form>
    <div id="email">
      <label for="email">メールアドレス</label>
      //valueの場合、value={email}だけでは動かない。
      <input type="email" name="email" id="email" bind:value={email} />
    </div>
    <div id="password">
      <label for="password">パスワード</label>
      <input
        type="password"
        name="password"
        bind:value={password}
        id="password"
      />
    </div>
    <div id="submit">
      <input type="submit" value="ログイン" disabled={check} />
    </div>
    <p>{email}:{password}:{check}</p>
  </form>
</main>

<style>
</style>

どうやら、『$:』はVueでいうDataだけでなく、computedの役割も果たせるようです。

あとがき

いつか、Reactも勉強したいなぁと考えています。