Vue 正则验证 邮箱验证为例:
我想要做的东西就是,鼠标点击别处然后 页面判断一下,看一下 数据是否符合格式。前台就这样简单的写写,主要目的就是一个测试嘛<template><div id="email"><h3>邮箱:</h3><br><input type="email" v-model...
·
我想要做的东西就是,鼠标点击别处然后 页面判断一下,看一下 数据是否符合格式。
前台就这样简单的写写,主要目的就是一个测试嘛
<template>
<div id="email">
<h3>
邮箱:
</h3>
<br>
<input type="email" v-model="email" @blur="email_blur">
<br>
<h4>
<span style="color: red">
{{message}}
</span>
</h4>
<br>
</div>
</template>
<script>
export default {
name: "Email",
data() {
return {
email: '',
message: ''
}
},
methods: {
email_blur() {
var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
if (!verify.test(this.email)) {
this.message = '邮箱格式错误, 请重新输入'
} else {
this.message = '可以请求接口了'
}
},
}
}
</script>
怎么样 有没有 感觉 veryesay。
整理下 思想 我们 运用 @blur 光标移除 触发函数,然后呢 将 写好声明 的 正则表达式,只需要 .test() 就可以判断了。真的是 veryeasy 对吧。
演示一下
更多推荐
已为社区贡献5条内容
所有评论(0)