对vue中的input输入框进行邮箱验证方式

 更新时间:2023年10月18日 08:54:51   作者: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 对吧。

演示一下

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • npm install报错缺少python问题及解决

    npm install报错缺少python问题及解决

    这篇文章主要介绍了npm install报错缺少python问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue.js实战之组件的进阶

    Vue.js实战之组件的进阶

    组件(Component)是 Vue.js 最强大的功能之一,之前的文章都只是用到了基本的封装功能,这次将介绍一些更强大的扩展。这篇文章主要介绍了Vue.js实战之组件进阶的相关资料,需要的朋友们可以参考借鉴,下面来一起看看吧。
    2017-04-04
  • vue2.0 路由不显示router-view的解决方法

    vue2.0 路由不显示router-view的解决方法

    下面小编就为大家分享一篇vue2.0 路由不显示router-view的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 解决vite项目Uncaught Syntaxerror:Unexpected token>vue项目上线白屏问题

    解决vite项目Uncaught Syntaxerror:Unexpected token>vue项

    这篇文章主要介绍了解决vite项目Uncaught Syntaxerror:Unexpected token>vue项目上线白屏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则)

    element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则)

    这篇文章主要介绍了element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则),本篇文章记录el-table增加一行可编辑的数据列,进行增删改,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • Vue 实时监听窗口变化 windowresize的两种方法

    Vue 实时监听窗口变化 windowresize的两种方法

    这篇文章主要介绍了Vue 实时监听窗口变化 windowresize的两种方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 15分钟学会vue项目改造成SSR(小白教程)

    15分钟学会vue项目改造成SSR(小白教程)

    这篇文章主要介绍了15分钟学会vue项目改造成SSR(小白教程),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • vue实现树状表格效果

    vue实现树状表格效果

    这篇文章主要为大家详细介绍了vue实现树状表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • vue draggable resizable 实现可拖拽缩放的组件功能

    vue draggable resizable 实现可拖拽缩放的组件功能

    这篇文章主要介绍了vue draggable resizable 实现可拖拽缩放的组件功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • Vue3+Vite实现动态路由的详细实例代码

    Vue3+Vite实现动态路由的详细实例代码

    我们在开发大型系统的时候一般都需要动态添加路由,下面这篇文章主要给大家介绍了关于Vue3+Vite实现动态路由的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论