原生支持邮箱格式验证
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>