需求：个人中心注册，输入邮箱，若有误，显示错误信息

效果：

 

 思路：

除了邮箱的正则表达式为

   let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(!reg.test(this.变量名)) {
              
            }

思路与#vue# js正则表达式——实现手机号校验效果基本一致 （具体可以查看链接）

demo 示例

<template>

    <div class="signin">
            <h2>登录</h2>
            <div>
                <input placeholder="用户输入邮箱" v-model="mail" @blur="getmail"/>
                <span class="iconfont iconselect_fill"
                      style="color:green; font-size: 18px"
                      v-show="mailshow"></span>
                <span class="iconfont iconicon-close"
                      style="font-size: 16px; color:red;"
                      v-show="errmailshow"> 请输入正确的邮箱！</span>
            </div>
           
</template>

<script>
     data() {
        return {
            mail:'',
            mailshow:false, //邮箱正确图标
            errmailshow:false, //邮箱错误图标
        }
    },
    methods: {
        getmail() {  //邮箱检验规则
            let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(!reg.test(this.mail)) { //当邮箱不符合校验规则时
                this.errmailshow = true;
                this.mailshow = false;
            }
            else {
                this.errmailshow = false;
                this.mailshow = true;
            }
        }
</script>
<style>
    h2 {
    font-size: 25px;
    color: red;
    margin-bottom: 20px;
}

.signin {
    width: 600px;
    margin: 50px auto;
}

.signin input {
    display: inline-block;
    width: 350px;
    margin-bottom: 20px;
    border-radius: .1rem;
}

.signin button {
    width: 350px;
    height:  50px;
    background-color: #FECC8F;
}
.signin-item {
    position: relative;

}
.signin-item .iconkekan {
    position: absolute;
    right: 42%;
    padding-top: 20px;
    padding-right: 10px;
    font-size: 18px;
}

.signin-item .iconkekan-hover {
  color: #DA1A14;
}

</style>