vue中輸入框事件的使用及數(shù)值校驗(yàn)方式

更新時(shí)間：2022年08月11日 08:35:48 作者：非往

這篇文章主要介紹了vue中輸入框事件的使用及數(shù)值校驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue輸入框事件使用及數(shù)值校驗(yàn)

最近做項(xiàng)目，用到vue去監(jiān)聽輸入框當(dāng)中值，并且去校驗(yàn)值的正確性，

我們都知道 vue 當(dāng)中主要監(jiān)聽輸入框的方法有四個(gè)：input change blur keyup.enter

他們都可以使用@+xxxx="在vue當(dāng)中定義的方法"，去引用實(shí)現(xiàn)，然后利用v-model去綁定data當(dāng)中的數(shù)據(jù)，

下面我們就來介紹一下這四個(gè)方法：

一、@input（或者是v-on:input）

使用的方法：

//這個(gè)事件在用戶輸入時(shí)觸發(fā)的
//v-model 就是你綁定的變量，輸入的值會(huì)存儲(chǔ)在這個(gè)變量當(dāng)中
<input type="text" placeholder="文本框默認(rèn)值" v-model="inputVal" ?v-on:input="search" value="" />

二、@change

該事件和enter事件相似，在手機(jī)上都是要經(jīng)過觸發(fā)虛擬鍵盤的搜索鍵才會(huì)觸發(fā)事件。使用方式同input事件。

三、@keyup.enter

該事件與v-on:input事件的區(qū)別在于：input事件是實(shí)時(shí)監(jiān)控的，每次輸入都會(huì)調(diào)用，而@keyup.enter事件則是在pc上需要點(diǎn)擊回車鍵觸發(fā)，而在手機(jī)上則是需要點(diǎn)擊輸入鍵盤上的確定鍵才可觸發(fā)。

四、@blur（失焦）

要滿足輸入框在輸入完成、移到其他地方時(shí)進(jìn)行驗(yàn)證時(shí)，需要用到該事件，用此事件進(jìn)行綁定驗(yàn)證方法即可。

注：如果使用mintui中的mt-field標(biāo)簽時(shí)，對(duì)應(yīng)的blur（失焦）事件要執(zhí)行時(shí)，要用@blur.native.capture=""來代替@blur。

下面來簡(jiǎn)單的使用一下blur 來校驗(yàn)文本框當(dāng)中是否輸入的都是數(shù)值：

首先我們?cè)陧?yè)面當(dāng)中定義一個(gè)輸入框，并綁定我們?cè)趘ue當(dāng)中定義的方法以及變量：

? <div class="form-group">
? ? ? ? ? ? <div class="col-sm-2 control-label">數(shù)值
//這個(gè)是最簡(jiǎn)單用來標(biāo)識(shí)這個(gè)參數(shù)必填的一個(gè)標(biāo)志，也就是大家經(jīng)常見到的（*）--red
? ? ? ? ? ? ? ? <span style="color:red">*</span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="col-sm-10">
//文本框之上綁定 model和checknNum方法
? ? ? ? ? ? ? ? <input type="text" class="form-control" v-model="test.itemValue" placeholder="數(shù)值(必填)" @blur="checkNum"/>
? ? ? ? ? ? </div>
? ? ? ? </div>

之后我們?cè)趤砜匆幌聼o訛當(dāng)中定義的變量以及方法：

var vm = new Vue({
?? ?el:'#rrapp',
?? ?data:{
//定義的對(duì)象
? ? ? ? test: {},
? ? ? ??? ?},
?? ?methods: {
//校驗(yàn)數(shù)據(jù)的方法，在這里我們不用正則表達(dá)式，使用最簡(jiǎn)單的indexOf方法
? ? ? ? checkNum:function() {
? ? ? ? ?? ?var num = vm.test.itemValue;
?? ??? ? ? ? ? ? ? ?for (var i = 1; i < num.length; i++) {
? ? ? ? ? ? ? ? if (!('0123456789'.indexOf(num.substr(i, 1)) > -1)) {
? ? ? ? ? ? ? ? ? ? alert("請(qǐng)輸入正確的數(shù)值參數(shù)");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
?? ??? ?}
});

下面介紹一下indexOf這個(gè)方法：

indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。

stringObject.indexOf(searchvalue,fromindex)

該方法將從頭到尾地檢索字符串 stringObject，看它是否含有子串 searchvalue。
開始檢索的位置在字符串的 fromindex 處或字符串的開頭（沒有指定 fromindex 時(shí)）。
如果找到一個(gè) searchvalue，則返回 searchvalue 的第一次出現(xiàn)的位置。stringObject 中的字符位置是從 0 開始的。

提示和注釋

注釋：indexOf() 方法對(duì)大小寫敏感！

注釋：如果要檢索的字符串值沒有出現(xiàn)，則該方法返回 -1。

所以一0~9的數(shù)字去做對(duì)比，這樣就能夠比較出文本框輸入的是不是數(shù)字了

之后就是：

必填項(xiàng) 后面的紅色 * ：<span style="color:red">*</span>這樣一種寫法

這就是一個(gè)最簡(jiǎn)單的vue完成數(shù)據(jù)校驗(yàn)的使用，以及indexOf方法的一個(gè)簡(jiǎn)單使用；

vue中常用表單校驗(yàn)規(guī)則整理

在 vue開發(fā)中，難免遇到各種表單校驗(yàn)，elementUI自帶的驗(yàn)證往往不能滿足復(fù)雜的需求。

這里整理了一些高頻率用到的校驗(yàn)方法

1 是否合法IP地址

export function validateIP(rule, value,callback) {
? ? if(value==''||value==undefined||value==null){
? ? ? callback();
? ? }else {
? ? ? const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
? ? ? if ((!reg.test(value)) && value != '') {
? ? ? ? callback(new Error('請(qǐng)輸入正確的IP地址'));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? }
}

2 是否手機(jī)號(hào)碼

?export function validatePhone(rule, value,callback) {
? ? const reg =/^[1][3-9][0-9]{9}$/;
? ? if(value==''||value==undefined||value==null){
? ? ? callback();
? ? }else {
? ? ? if ((!reg.test(value)) && value != '') {
? ? ? ? callback(new Error('請(qǐng)輸入正確的電話號(hào)碼'));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? }
?}

3 是否身份證號(hào)碼

? export function validateIdNo(rule, value,callback) {
? ? var format = /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/;
? ? //號(hào)碼規(guī)則校驗(yàn)
? ? if (!format.test(value)) {
? ? ? ? callback(new Error('請(qǐng)輸入正確身份證號(hào)'));
? ? }
? ? //區(qū)位碼校驗(yàn)
? ? //出生年月日校驗(yàn) ?前正則限制起始年份為1900;
? ? var year = value.substr(6, 4),//身份證年
? ? ? ? month = value.substr(10, 2),//身份證月
? ? ? ? date = value.substr(12, 2),//身份證日
? ? ? ? time = Date.parse(month + '-' + date + '-' + year),//身份證日期時(shí)間戳date
? ? ? ? now_time = Date.parse(new Date()),//當(dāng)前時(shí)間戳
? ? ? ? dates = (new Date(year, month, 0)).getDate();//身份證當(dāng)月天數(shù)
? ? if (time > now_time || date > dates) {
? ? ? ? callback(new Error('請(qǐng)輸入正確身份證號(hào)'));
? ? }
? ? //校驗(yàn)碼判斷
? ? var c = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); ?//系數(shù)
? ? var b = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'); //校驗(yàn)碼對(duì)照表
? ? var id_array = value.split("");
? ? var sum = 0;
? ? for (var k = 0; k < 17; k++) {
? ? ? ? sum += parseInt(id_array[k]) * parseInt(c[k]);
? ? }
? ? if (id_array[17].toUpperCase() != b[sum % 11].toUpperCase()) {
? ? ? ? callback(new Error('請(qǐng)輸入正確身份證號(hào)'));
? ? }
? ? callback();
?}

4 是否郵箱

?export function validateEMail(rule, value,callback) {
? ? const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
? ? if(value==''||value==undefined||value==null){
? ? ? callback();
? ? }else{
? ? ? if (!reg.test(value)){
? ? ? ? callback(new Error('請(qǐng)輸入正確的郵箱'));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? }
?}

5 合法url

?export function validateURL(url) {
? ? const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
? ? return urlregex.test(url);
?}

6 驗(yàn)證是否包含英文數(shù)字以及下劃線

?export function isPassword(rule, value, callback) {
? ? const reg =/^[_a-zA-Z0-9]+$/;
? ? if(value==''||value==undefined||value==null){
? ? ? callback();
? ? } else {
? ? ? if (!reg.test(value)){
? ? ? ? callback(new Error('僅由英文字母，數(shù)字以及下劃線組成'));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? }
?}

7 檢驗(yàn)數(shù)值的范圍

export function checkMax10000(rule, value, callback) {
? ? if (value == '' || value == undefined || value == null) {
? ? ? callback();
? ? } else if (!Number(value)) {
? ? ? callback(new Error('請(qǐng)輸入[1,10000]之間的數(shù)字'));
? ? } else if (value < 1 || value > 10000) {
? ? ? callback(new Error('請(qǐng)輸入[1,10000]之間的數(shù)字'));
? ? } else {
? ? ? callback();
? ? }
}

8 驗(yàn)證數(shù)字輸入框最大數(shù)值

export function checkMaxVal(rule, value,callback) {
? if (value < 0 || value > 最大值) {
? ? callback(new Error('請(qǐng)輸入[0,最大值]之間的數(shù)字'));
? } else {
? ? callback();
? }
}

9 驗(yàn)證是否正整數(shù)

export function isInteger(rule, value, callback) {
? ?if (!value) {
? ? ?return callback(new Error('輸入不可以為空'));
? ?}
? ?setTimeout(() => {
? ? ?if (!Number(value)) {
? ? ? ?callback(new Error('請(qǐng)輸入正整數(shù)'));
? ? ?} else {
? ? ? ?const re = /^[0-9]*[1-9][0-9]*$/;
? ? ? ?const rsCheck = re.test(value);
? ? ? ?if (!rsCheck) {
? ? ? ? ?callback(new Error('請(qǐng)輸入正整數(shù)'));
? ? ? ?} else {
? ? ? ? ?callback();
? ? ? ?}
? ? ?}
? ?}, 0);
}

10 驗(yàn)證是否是[0-1]的小數(shù)

export function isDecimal(rule, value, callback) {
? if (!value) {
? ? return callback(new Error('輸入不可以為空'));
? }
? setTimeout(() => {
? ? if (!Number(value)) {
? ? ? callback(new Error('請(qǐng)輸入[0,1]之間的數(shù)字'));
? ? } else {
? ? ? if (value < 0 || value > 1) {
? ? ? ? callback(new Error('請(qǐng)輸入[0,1]之間的數(shù)字'));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? }
? }, 100);
}

11 驗(yàn)證端口是否在[0,65535]之間

export function isPort(rule, value, callback) {
? if (!value) {
? ? return callback(new Error('輸入不可以為空'));
? }
? setTimeout(() => {
? ? if (value == '' || typeof(value) == undefined) {
? ? ? callback(new Error('請(qǐng)輸入端口值'));
? ? } else {
? ? ? const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
? ? ? const rsCheck = re.test(value);
? ? ? if (!rsCheck) {
? ? ? ? callback(new Error('請(qǐng)輸入在[0-65535]之間的端口值'));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? }
? }, 100);
}

12 驗(yàn)證小寫字母

export function validateLowerCase(val) {
? ?const reg = /^[a-z]+$/;
? ?return reg.test(val);
}

13 驗(yàn)證大寫字母

export function validateUpperCase(val) {
? ??? ?const reg = /^[A-Z]+$/;
??? ?return reg.test(val);
}

14 驗(yàn)證是否兩位小數(shù)

export function validateValidity (rule, value, callback){
?? ? if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
?? ? ?? ?callback(new Error('最多兩位小數(shù)！??！'));
?? ? } else {
?? ? ?? ?callback();
?? ? }
}

15 中文校驗(yàn)

?export function validateContacts(rule, value, callback){
? ? if (!value) {
? ? ? return callback(new Error('請(qǐng)輸入中文'))
? ? }
? ? if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
? ? ? callback(new Error('不可輸入特殊字符'))
? ? } else {
? ? ? callback()
? ? }
?}

16 純數(shù)字校驗(yàn)

export function validateNumber(rule, value, callback){
? ? let numberReg = /^\d+$|^\d+[.]?\d+$/
? ? if (value !== '') {
? ? ? if (!numberReg.test(value)) {
? ? ? ? callback(new Error('請(qǐng)輸入數(shù)字'))
? ? ? } else {
? ? ? ? callback()
? ? ? }
? ? } else {
? ? ? callback(new Error('請(qǐng)輸入值'))
? ? }
}

17 最多一位小數(shù)校驗(yàn)

export function onePoint(rule, value, callback){
? ? if (!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value)) {
? ? ? callback(new Error('最多一位小數(shù)?。?！'));
? ? } else {
? ? ? callback();
? ? }
}

18 賬號(hào)校驗(yàn)

export function validateCode(rule, value, callback){
? ? if (!value) {
? ? ? return callback(new Error('請(qǐng)輸入賬號(hào)'))
? ? }
? ? if (!/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/.test(value)) {
? ? ? callback(new Error('賬號(hào)必須為6-20位字母和數(shù)字組合'))
? ? } else {
? ? ? callback()
? ? }
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫(kù)

CMS

常用工具

vue中輸入框事件的使用及數(shù)值校驗(yàn)方式

目錄

vue輸入框事件使用及數(shù)值校驗(yàn)

一、@input（或者是v-on:input）

二、@change

三、@keyup.enter

四、@blur（失焦）

提示和注釋

vue中常用表單校驗(yàn)規(guī)則整理

這里整理了一些高頻率用到的校驗(yàn)方法

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

vue中輸入框事件的使用及數(shù)值校驗(yàn)方式

目錄

vue輸入框事件使用及數(shù)值校驗(yàn)

一、@input（或者是v-on:input）

二、@change

三、@keyup.enter

四、@blur（失焦）

提示和注釋

vue中常用表單校驗(yàn)規(guī)則整理

這里整理了一些高頻率用到的校驗(yàn)方法

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、@input（或者是v-on:input）

二、@change