vue自定義校驗方法整理(不定期更新中 )

2021-08-20 18:07:00 字數 4335 閱讀 6956

vue中常常遇到一些需要自定義校驗方法的場景,下面整理了我在開發過程中遇到的一些特殊場景,以及這些場景下我的處理方法(這個時不時遇到乙個,因此不定期更新中…)

<-- 頁面結構 -->

class="input-text">

type="tel" v-model="withdraw_amount" style="font-size: 16px;color: #000;" />

div>

<-- cashnumber為可提現金額 -->

name="fade" v-if="(cashnumber>3||cashnumber==3)&&canclick">

class="page-bottom-btn" v-if="load" style="transition-delay: 0.1s;" >

class="g-btn

btn-blue" @click="submit :key="1">確定提現a>

div>

transition>

name="fade" v-else>

class="page-bottom-btn" v-if="load" style="transition-delay: 0.1s;" >

class="g-btn" style="background: #ccc;color:#fff" :key="2">確定提現p>

div>

transition>

//以下為js關鍵**

data: ,

cashnumber: "0",

withdraw_amount:0,

canclick:true,

},methods:

if(!isnan(val))else

}, submit:function

(val)

},watch: else

}else

if(this.withdraw_amount>_this.cashnumber-0)

},}

<-- 結構 -->

"text" name="username" v-model="username" v-on:blur="nameischinese" placeholder="姓名" minlength="1" maxlength="4"/>

"text" name="idcard" v-model="idcard" v-on:blur="isidcardno" @keyup="checkidinput" placeholder="身份證號" maxlength="18" />

"loginfooter" type="text" name="bankcard" v-model="bankcard" @keyup="showbanklimit" v-on:blur="checkbankno" placeholder="銀行卡號" maxlength="19" />

"text" name="phonenum" v-model="phonenum" v-on:blur="checkphone" placeholder="銀行預留手機號" maxlength="11"/>

//以下為關鍵js**

data: ,

methods: ,

//校驗使用者名稱輸入 輸入2-4個漢字

nameischinese:function

()$/))else

},checkidinput:function

()else

},isidcardno:function

(num)

// check and set value

for(i=0;iif ((vararray[i] < '0' || vararray[i] > '9') && (i != 17)) else

if (i < 17)

} if (intstrlen == 18)

// calculate the sum of the products

for(i=0;i<17;i++)

// calculate the check digit

intcheckdigit = 12 - lngproduct % 11;

switch (intcheckdigit)

// check last digit

if (vararray[17].touppercase() != intcheckdigit)

} else

} // alert ("correct.");

this.idflag=1;

return

true;

},showbanklimit:function

()else

if(this.bankcard.length>=6)

}else

},//銀行卡號luhn校驗演算法

//luhn校驗規則:16位銀行卡號(19位通用):

//1.將未帶校驗位的 15(或18)位卡號從右依次編號 1 到 15(18),位於奇數字型大小上的數字乘以 2。

//2.將奇位乘積的個十位全部相加,再加上所有偶數字上的數字。

//3.將加法和加上校驗位能被 10 整除。

//bankno為銀行卡號

luhncheck: function

(bankno)

var arrjishu=new array(); //奇數字*2的積 <9

var arrjishu2=new array(); //奇數字*2的積 >9

var arroushu=new array(); //偶數字陣列

for(var j=0;jif((j+1)%2==1)

else

//偶數字

arroushu.push(newarr[j]);

}var jishu_child1=new array();//奇數字*2 >9 的分割之後的陣列個位數

var jishu_child2=new array();//奇數字*2 >9 的分割之後的陣列十位數

for(var h=0;h10);

jishu_child2.push(parseint(arrjishu2[h])/10);

}

var sumjishu=0; //奇數字*2 < 9 的陣列之和

var sumoushu=0; //偶數字陣列之和

var sumjishuchild1=0; //奇數字*2 >9 的分割之後的陣列個位數之和

var sumjishuchild2=0; //奇數字*2 >9 的分割之後的陣列十位數之和

var sumtotal=0;

for(var m=0;mfor(var n=0;nfor(var p=0;p//計算總和

sumtotal=parseint(sumjishu)+parseint(sumoushu)+parseint(sumjishuchild1)+parseint(sumjishuchild2);

//計算luhn值

var k= parseint(sumtotal)%10==0?10:parseint(sumtotal)%10;

var luhn= 10-k;

if(lastnum==luhn)else

},//檢查銀行卡號

checkbankno: function

() if(bankno.length < 16 || bankno.length > 19)

var num = /^\d*$/;//全數字

if(!num.exec(bankno))

//開頭6位

var strbin = "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";

if(strbin.indexof(bankno.substring(0, 2)) == -1)

//luhn校驗

if(!this.luhncheck(bankno))

this.bankflag=1;

return

true;

},//手機號校驗

checkphone:function

(mobile)

if(mobile.length==0)

if(mobile.length!=11)

var myreg = /^[1][3,4,5,7,8][0-9]$/;

if(!myreg.test(mobile))else

},}

jquery validate 自定義校驗方法

1.引入js jquery.min.js jquery.validate.min.js messages zh.min.js 2.新增驗證方法,第乙個引數為驗證方法的名稱,第二個引數為驗證方法。validator.addmethod money function value,element,para...

vue元件,自定義v model方法

在使用my component元件時,為了實現雙向繫結。vue.component my component model methods 上面 中 1.props物件中,需要定義乙個能夠從外部傳入的變數,這裡我定義了乙個obj。這樣就可以用下面這行 進行傳遞值 2.為了能夠使用v model語法糖,...

元件 vue自定義方法傳遞

元件樣式 麵包屑導航欄 jsvue.component bannerone props bigimg bannerheight aboutyt downlink textcolor bigbackcolors methods template bar bigback color bigbackcol...