vue中輸入框事件的使用及數(shù)值校驗方式
更新時間：2022年08月11日 08:35:48 作者：非往
這篇文章主要介紹了vue中輸入框事件的使用及數(shù)值校驗方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue輸入框事件使用及數(shù)值校驗
最近做項目，用到vue去監(jiān)聽輸入框當中值，并且去校驗值的正確性，
我們都知道 vue 當中 主要監(jiān)聽輸入框的方法有四個：input change blur keyup.enter
他們都可以使用@+xxxx="在vue當中定義的方法"，去引用實現(xiàn)，然后利用v-model去綁定data當中的數(shù)據(jù)，
下面我們就來介紹一下這四個方法：
一、@input（或者是v-on:input）
使用的方法：
//這個事件在用戶輸入時觸發(fā)的 //v-model 就是你綁定的變量，輸入的值會存儲在這個變量當中 <input type="text" placeholder="文本框默認值" v-model="inputVal" ?v-on:input="search" value="" />
二、@change
該事件和enter事件相似，在手機上都是要經(jīng)過觸發(fā)虛擬鍵盤的搜索鍵才會觸發(fā)事件。使用方式同input事件。
三、@keyup.enter
該事件與v-on:input事件的區(qū)別在于：input事件是實時監(jiān)控的，每次輸入都會調(diào)用，而@keyup.enter事件則是在pc上需要點擊回車鍵觸發(fā)，而在手機上則是需要點擊輸入鍵盤上的確定鍵才可觸發(fā)。
四、@blur（失焦）
要滿足輸入框在輸入完成、移到其他地方時進行驗證時，需要用到該事件，用此事件進行綁定驗證方法即可。
注：如果使用mintui中的mt-field標簽時，對應的blur（失焦）事件要執(zhí)行時，要用@blur.native.capture=""來代替@blur。
下面來簡單的使用一下blur 來校驗文本框當中是否輸入的都是數(shù)值：
首先我們在頁面當中定義一個輸入框，并綁定我們在vue當中定義的方法以及變量：
? <div class="form-group"> ? ? ? ? ? ? <div class="col-sm-2 control-label">數(shù)值 //這個是最簡單用來標識這個參數(shù)必填的一個標志，也就是大家經(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>
之后我們在來看一下無訛當中定義的變量以及方法：
var vm = new Vue({
?? ?el:'#rrapp',
?? ?data:{
//定義的對象
? ? ? ? test: {},
? ? ? ??? ?},
?? ?methods: {
//校驗數(shù)據(jù)的方法，在這里我們不用正則表達式，使用最簡單的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("請輸入正確的數(shù)值參數(shù)");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
?? ??? ?}
});下面介紹一下indexOf這個方法：
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。
stringObject.indexOf(searchvalue,fromindex)
- 該方法將從頭到尾地檢索字符串 stringObject，看它是否含有子串 searchvalue。
- 開始檢索的位置在字符串的 fromindex 處或字符串的開頭（沒有指定 fromindex 時）。
- 如果找到一個 searchvalue，則返回 searchvalue 的第一次出現(xiàn)的位置。stringObject 中的字符位置是從 0 開始的。
提示和注釋
注釋：indexOf() 方法對大小寫敏感！
注釋：如果要檢索的字符串值沒有出現(xiàn)，則該方法返回 -1。
所以一0~9的數(shù)字去做對比，這樣就能夠比較出文本框輸入的是不是數(shù)字了
之后就是：
必填項 后面的紅色 * ：<span style="color:red">*</span>這樣一種寫法
這就是一個最簡單的vue完成數(shù)據(jù)校驗的使用，以及indexOf方法的一個簡單使用；
vue中常用表單校驗規(guī)則整理
在 vue開發(fā)中，難免遇到各種表單校驗，elementUI自帶的驗證往往不能滿足復雜的需求。
這里整理了一些高頻率用到的校驗方法
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('請輸入正確的IP地址'));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? }
}2 是否手機號碼
?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('請輸入正確的電話號碼'));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? }
?}3 是否身份證號碼
? 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]$/;
? ? //號碼規(guī)則校驗
? ? if (!format.test(value)) {
? ? ? ? callback(new Error('請輸入正確身份證號'));
? ? }
? ? //區(qū)位碼校驗
? ? //出生年月日校驗 ?前正則限制起始年份為1900;
? ? var year = value.substr(6, 4),//身份證年
? ? ? ? month = value.substr(10, 2),//身份證月
? ? ? ? date = value.substr(12, 2),//身份證日
? ? ? ? time = Date.parse(month + '-' + date + '-' + year),//身份證日期時間戳date
? ? ? ? now_time = Date.parse(new Date()),//當前時間戳
? ? ? ? dates = (new Date(year, month, 0)).getDate();//身份證當月天數(shù)
? ? if (time > now_time || date > dates) {
? ? ? ? callback(new Error('請輸入正確身份證號'));
? ? }
? ? //校驗碼判斷
? ? 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'); //校驗碼對照表
? ? 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('請輸入正確身份證號'));
? ? }
? ? 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('請輸入正確的郵箱'));
? ? ? } 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 驗證是否包含英文數(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 檢驗數(shù)值的范圍
export function checkMax10000(rule, value, callback) {
? ? if (value == '' || value == undefined || value == null) {
? ? ? callback();
? ? } else if (!Number(value)) {
? ? ? callback(new Error('請輸入[1,10000]之間的數(shù)字'));
? ? } else if (value < 1 || value > 10000) {
? ? ? callback(new Error('請輸入[1,10000]之間的數(shù)字'));
? ? } else {
? ? ? callback();
? ? }
}8 驗證數(shù)字輸入框最大數(shù)值
export function checkMaxVal(rule, value,callback) {
? if (value < 0 || value > 最大值) {
? ? callback(new Error('請輸入[0,最大值]之間的數(shù)字'));
? } else {
? ? callback();
? }
}9 驗證是否正整數(shù)
export function isInteger(rule, value, callback) {
? ?if (!value) {
? ? ?return callback(new Error('輸入不可以為空'));
? ?}
? ?setTimeout(() => {
? ? ?if (!Number(value)) {
? ? ? ?callback(new Error('請輸入正整數(shù)'));
? ? ?} else {
? ? ? ?const re = /^[0-9]*[1-9][0-9]*$/;
? ? ? ?const rsCheck = re.test(value);
? ? ? ?if (!rsCheck) {
? ? ? ? ?callback(new Error('請輸入正整數(shù)'));
? ? ? ?} else {
? ? ? ? ?callback();
? ? ? ?}
? ? ?}
? ?}, 0);
}10 驗證是否是[0-1]的小數(shù)
export function isDecimal(rule, value, callback) {
? if (!value) {
? ? return callback(new Error('輸入不可以為空'));
? }
? setTimeout(() => {
? ? if (!Number(value)) {
? ? ? callback(new Error('請輸入[0,1]之間的數(shù)字'));
? ? } else {
? ? ? if (value < 0 || value > 1) {
? ? ? ? callback(new Error('請輸入[0,1]之間的數(shù)字'));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? }
? }, 100);
}11 驗證端口是否在[0,65535]之間
export function isPort(rule, value, callback) {
? if (!value) {
? ? return callback(new Error('輸入不可以為空'));
? }
? setTimeout(() => {
? ? if (value == '' || typeof(value) == undefined) {
? ? ? callback(new Error('請輸入端口值'));
? ? } 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('請輸入在[0-65535]之間的端口值'));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? }
? }, 100);
}12 驗證小寫字母
export function validateLowerCase(val) {
? ?const reg = /^[a-z]+$/;
? ?return reg.test(val);
}13 驗證大寫字母
export function validateUpperCase(val) {
? ??? ?const reg = /^[A-Z]+$/;
??? ?return reg.test(val);
}14 驗證是否兩位小數(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 中文校驗
?export function validateContacts(rule, value, callback){
? ? if (!value) {
? ? ? return callback(new Error('請輸入中文'))
? ? }
? ? if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
? ? ? callback(new Error('不可輸入特殊字符'))
? ? } else {
? ? ? callback()
? ? }
?}16 純數(shù)字校驗
export function validateNumber(rule, value, callback){
? ? let numberReg = /^\d+$|^\d+[.]?\d+$/
? ? if (value !== '') {
? ? ? if (!numberReg.test(value)) {
? ? ? ? callback(new Error('請輸入數(shù)字'))
? ? ? } else {
? ? ? ? callback()
? ? ? }
? ? } else {
? ? ? callback(new Error('請輸入值'))
? ? }
}17 最多一位小數(shù)校驗
export function onePoint(rule, value, callback){
? ? if (!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value)) {
? ? ? callback(new Error('最多一位小數(shù)?。?！'));
? ? } else {
? ? ? callback();
? ? }
}18 賬號校驗
export function validateCode(rule, value, callback){
? ? if (!value) {
? ? ? return callback(new Error('請輸入賬號'))
? ? }
? ? if (!/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/.test(value)) {
? ? ? callback(new Error('賬號必須為6-20位字母和數(shù)字組合'))
? ? } else {
? ? ? callback()
? ? }
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了vue?mixins代碼復用的項目實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
vue中使用v-if隱藏元素時會出現(xiàn)閃爍問題的解決
這篇文章主要介紹了vue中使用v-if隱藏元素時會出現(xiàn)閃爍問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在 setup 語法糖中通過 import 引入的內(nèi)容，也可以直接在 template 標簽中使用，這篇文章主要介紹了Vue?使用?setup?語法糖,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了vue+antd實現(xiàn)折疊與展開組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家介紹了Vue3編程流暢技巧使用setup語法糖拒絕寫return的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue中的Ajax?配置代理?slot插槽的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)搜索過濾效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要為大家詳細介紹了如何利用Vue實現(xiàn)懸浮框自由移動+錄音功能，文中的示例代碼講解詳細，感興趣的小伙伴可以動手嘗試一下2022-07-07
在做文字處理的項目時經(jīng)常會遇到搜索文字并高亮的需求,本文就來介紹vue 指定文字高亮的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-12-12
示例vue 的keep-alive緩存功能的實現(xiàn)
這篇文章主要介紹了示例vue 的keep-alive緩存功能的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12