原生支持邮箱格式验证

2023-08-22 20:57:50

现在原生已经原生支持输入邮箱的格式验证了，不用再去写正则了

现在是否为正确的邮箱格式 是

<script lang="ts" setup>
import { ref } from 'vue'
const inputRef = ref<HTMLInputElement>()
const isRight = ref<boolean>(true)
const inputVal = ref('')
const verifyEmail = () => {
  isRight.value = inputRef.value?.checkValidity()!
}
</script>
<template>
  <div class="">
    <input
      ref="inputRef"
      :value="inputVal"
      placeholder="请输入正确的邮箱"
      @input="e => (inputVal = e.target.value)"
      border="1px solid"
      rounded
      p1
      type="email"
    />
    <button ml2 border="1px solid" rounded p1 @click="verifyEmail">
      点击后看结果
    </button>
    <div>现在是否为正确的邮箱格式 {{ isRight ? '是' : '不是' }}</div>
  </div>
</template>