vue.js表单 邮箱验证

<template>
  <form @submit.prevent="submitForm">
    <label for="email">Email:</label>
    <input type="email" id="email" v-model="email" />
    <span v-if="!isEmailValid">Invalid email format.</span>
    <button type="submit" :disabled="!isEmailValid">Submit</button>
  </form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const email = ref('');
    const isEmailValid = ref(false);

    // 监听email的变化并实时验证
    watch(email, (newValue) => {
      isEmailValid.value = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newValue);
    });

    function submitForm() {
      if (isEmailValid.value) {
        // 提交表单逻辑
        console.log('Form submitted with email:', email.value);
      }
    }

    return { email, isEmailValid, submitForm };
  }
};
</script>

import validator from 'validator';

// 使用validator库进行邮箱验证
const isEmailValid = validator.isEmail(email.value);

import { debounce } from 'lodash';

const validateEmail = debounce((newValue) => {
  isEmailValid.value = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newValue);
}, 300);

watch(email, validateEmail);