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)聽(tīng)輸入框當(dāng)中值，并且去校驗(yàn)值的正確性，
我們都知道 vue 當(dāng)中 主要監(jiān)聽(tīng)輸入框的方法有四個(gè)：input change blur keyup.enter
他們都可以使用@+xxxx="在vue當(dāng)中定義的方法"，去引用實(shí)現(xiàn)，然后利用v-model去綁定data當(dāng)中的數(shù)據(jù)，
下面我們就來(lái)介紹一下這四個(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)過(guò)觸發(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=""來(lái)代替@blur。
下面來(lái)簡(jiǎn)單的使用一下blur 來(lái)校驗(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)單用來(lái)標(biāo)識(shí)這個(gè)參數(shù)必填的一個(gè)標(biāo)志，也就是大家經(jīng)常見(jiàn)到的（*）--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è)趤?lái)看一下無(wú)訛當(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。
- 開(kāi)始檢索的位置在字符串的 fromindex 處或字符串的開(kāi)頭（沒(méi)有指定 fromindex 時(shí)）。
- 如果找到一個(gè) searchvalue，則返回 searchvalue 的第一次出現(xiàn)的位置。stringObject 中的字符位置是從 0 開(kāi)始的。
提示和注釋
注釋：indexOf() 方法對(duì)大小寫敏感！
注釋：如果要檢索的字符串值沒(méi)有出現(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開(kāi)發(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?mixins代碼復(fù)用的項(xiàng)目實(shí)踐
本文主要介紹了vue?mixins代碼復(fù)用的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
vue中使用v-if隱藏元素時(shí)會(huì)出現(xiàn)閃爍問(wèn)題的解決
這篇文章主要介紹了vue中使用v-if隱藏元素時(shí)會(huì)出現(xiàn)閃爍問(wèn)題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在 setup 語(yǔ)法糖中通過(guò) import 引入的內(nèi)容，也可以直接在 template 標(biāo)簽中使用，這篇文章主要介紹了Vue?使用?setup?語(yǔ)法糖,需要的朋友可以參考下2023-10-10
vue+antd實(shí)現(xiàn)折疊與展開(kāi)組件
這篇文章主要為大家詳細(xì)介紹了vue+antd實(shí)現(xiàn)折疊與展開(kāi)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
Vue3編程流暢技巧使用setup語(yǔ)法糖拒絕寫return
這篇文章主要為大家介紹了Vue3編程流暢技巧使用setup語(yǔ)法糖拒絕寫return的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue中的Ajax?配置代理?slot插槽的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索過(guò)濾效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
Vue實(shí)現(xiàn)懸浮框自由移動(dòng)+錄音功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)懸浮框自由移動(dòng)+錄音功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手嘗試一下2022-07-07
在做文字處理的項(xiàng)目時(shí)經(jīng)常會(huì)遇到搜索文字并高亮的需求,本文就來(lái)介紹vue 指定文字高亮的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
示例vue 的keep-alive緩存功能的實(shí)現(xiàn)
這篇文章主要介紹了示例vue 的keep-alive緩存功能的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12