這篇文章主要介紹vue如何實現(xiàn)手機號碼校驗功能,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
你所需要的網(wǎng)站建設(shè)服務(wù),我們均能行業(yè)靠前的水平為你提供.標(biāo)準(zhǔn)是產(chǎn)品質(zhì)量的保證,主要從事網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、企業(yè)網(wǎng)站建設(shè)、手機網(wǎng)站制作、網(wǎng)頁設(shè)計、成都品牌網(wǎng)站建設(shè)、網(wǎng)頁制作、做網(wǎng)站、建網(wǎng)站。創(chuàng)新互聯(lián)擁有實力堅強的技術(shù)研發(fā)團隊及素養(yǎng)的視覺設(shè)計專才。
HTML視圖層代碼:
<div id="app">
<input type="text" placeholder="請輸入手機號碼" v-model="val" @keyup="check"/>
<div class="box" v-show="statu==true">您輸入的手機號碼格式正確</div>
</div>
首先我們視圖層代碼是一個輸入框后面加上一個div作為提示信息,HTML代碼很簡單就不過多講解了;
JS數(shù)據(jù)邏輯層代碼:
//這里我們要引入一個文件,文件里面是防抖函數(shù)的是實現(xiàn)
<script src="test.js"></script>
<script>
// 實例化 vue對象
new Vue({
el:"#app",
data:{
//val是雙向數(shù)據(jù)綁定綁定輸入框的值
val:"",
//此處狀態(tài)值是根據(jù)狀態(tài)值的變化來修改后面div的提示信息
statu:false
},
mounted(){
},
methods:{
//check是我們綁定的輸入框的@keyup事件,注意這里不能是函數(shù),不然不會觸發(fā),必須要是對象
check:debounce(function(){
//這里是我們調(diào)用方法,也就是我們要做的事情
this.handle();
console.log(new Date())
}),
handle(){
//此處輸入是為了統(tǒng)計handle事件觸發(fā)的次數(shù)
console.log(“函數(shù)防抖”);
//這里定義校驗規(guī)則
let reg = /^1[3|4|5|7|8][0-9]{9}$/;
//校驗手機號規(guī)則
//如果校驗不通過會返回false,如果校驗通過會返回true
if(reg.test(this.val)){
//修改狀態(tài)值方便上面的視圖層判斷展示
this.statu=true;
//動態(tài)的修改提示信息
document.getElementsByClassName("box").innerHTML="您輸入的手機號碼格式錯誤";
}else{
this.statu=false;
document.getElementsByClassName("box").innerHTML="您輸入的手機號碼格式錯誤";
}
},
}
})
test.js
function debounce(fn) { //默認(rèn)300毫秒
var timer;
return function() {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
定時器必須要更改this指向,可以用apply、bind、或者上面用變量轉(zhuǎn)換等方式來進行更改this指向
fn.apply(this); // this 指向vue
}, 1000);
};
}
最后,我們的效果圖如下(這里只是簡單的模擬效果,視圖層搭建的不是很美觀):
我們可以看到我們打印的結(jié)果只輸出了一次,如果不使用防抖函數(shù),這里是會觸發(fā)11次的,因為一共輸入了11個字符;假設(shè)我們的方法體中是發(fā)送ajax和操作DOM呢?為了一個手機號碼校驗,難道我們要進行11次甚至更多次的ajax請求或者DOM操作嗎?如果是那樣,我們的程序性能可想而知,所以說防抖函數(shù)是一種性能提升方案;
上述講述的是我們之前常見的cdn方式引入vue,那么我們?nèi)绾卧趘ue-cli腳手架中使用防抖函數(shù)來進行提升性能呢?
vue-cli:
首先我們可以在build文件夾中新建一個js文件,這里我們定義common.js:
common.js
// 函數(shù)防抖
export function debounce(fn, delay) {
// 記錄上一次的延時器
var timer = null;
var delay = delay || 200;
return function() {
// var args = arguments;
var that = this;
// 清除上一次延時器
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(that)
}, delay);
}
}
注意:我們在vue-cli中自定義方法必須要export拋出,不然組件讀取不到
然后我們到我們需要用的文件中來進行引入和使用:
需要使用的組件:
import {debounce} from "../../build/common"
有拋出就一定有引入,我們這里用import來引用common.js文件里面的方法,這里的debounce就是我們用來接收common.js里面方法的變量;
調(diào)用方式跟上面的一樣:
這里的search是視圖層綁定的觸發(fā)事件,注意這里也需要是對象的形式來調(diào)用
methods:{
Search:debounce(function(){console.log(1234);},1000),
}
以上是“vue如何實現(xiàn)手機號碼校驗功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章題目:vue如何實現(xiàn)手機號碼校驗功能
標(biāo)題鏈接:http://aaarwkj.com/article14/igoege.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作、網(wǎng)頁設(shè)計公司、、網(wǎng)站維護、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)