对vue中的input输入框进行邮箱验证方式
作者：oilpastell
这篇文章主要介绍了对vue中的input输入框进行邮箱验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
对vue中的input输入框进行邮箱验证
如图效果，不是表单验证，是对input输入框的单独验证
可以给输入框添加@blur事件函数，代码如下
//给输入框添加事件函数
<el-input prefix-icon="el-icon-message" v-model="email" @blur="OnSubscribe()"></el-input>
//事件函数的逻辑
OnSubscribe() {
//邮箱验证的正则表达式
const reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
let str = this.email;
if (reg.test(str)) {
// 这里是邮箱验证成功的代码
subscribe({
e_mail: this.email,
state: this.state,
notes: this.notes
}).then(res => {
console.log(res);
if (res.data.code === 20000) {
this.$message.success("Subscribe to the success");
} else {
this.$message.warning(res.data.message);
return false;
}
});
} else {
this.$message.warning("Email format error");
}
}
vue正则验证 邮箱验证为例
我想要做的东西就是，鼠标点击别处然后 页面判断一下，看一下 数据是否符合格式。
前台就这样简单的写写，主要目的就是一个测试嘛
<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>
1234567891011121314151617
<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>
1234567891011121314151617181920212223
怎么样 有没有 感觉 veryesay。
整理下 思想 我们 运用 @blur 光标移除 触发函数，然后呢 将 写好声明 的 正则表达式，只需要 .test() 就可以判断了。真的是 veryeasy 对吧。
演示一下
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。