快捷導(dǎo)航

對vue中的input輸入框進(jìn)行郵箱驗證方式

更新時間：2023年10月18日 08:54:51 作者：oilpastell

這篇文章主要介紹了對vue中的input輸入框進(jìn)行郵箱驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

對vue中的input輸入框進(jìn)行郵箱驗證

如圖效果，不是表單驗證，是對input輸入框的單獨驗證

可以給輸入框添加@blur事件函數(shù)，代碼如下

//給輸入框添加事件函數(shù)
 <el-input prefix-icon="el-icon-message" v-model="email" @blur="OnSubscribe()"></el-input>

//事件函數(shù)的邏輯
 OnSubscribe() {
      //郵箱驗證的正則表達(dá)式
      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正則驗證郵箱驗證為例

我想要做的東西就是，鼠標(biāo)點擊別處然后頁面判斷一下，看一下數(shù)據(jù)是否符合格式。

前臺就這樣簡單的寫寫，主要目的就是一個測試嘛

<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 光標(biāo)移除觸發(fā)函數(shù)，然后呢將寫好聲明的正則表達(dá)式，只需要 .test() 就可以判斷了。真的是 veryeasy 對吧。