Vue使用正則校驗(yàn)文本框?yàn)檎麛?shù)

更新時(shí)間：2022年10月21日 14:47:25 作者：一只橘貓——C

這篇文章主要介紹了Vue使用正則校驗(yàn)文本框?yàn)檎麛?shù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用正則校驗(yàn)文本框?yàn)檎麛?shù)

封裝一個(gè)指令，簡(jiǎn)單粗暴，不需要在input上加上一大堆的方法或正則那么麻煩。

1.創(chuàng)建一個(gè)js文件，用來(lái)注入Vue全局指令

// 移入Vue
import Vue from 'vue';
// 通過(guò)Vue的指令方法，定義指令名稱
Vue.directive('Int', {
? ? // bind綁定 獲取當(dāng)前目標(biāo)的input（就是在哪個(gè)文本框上使用指令）
? ? bind: function(el) {
? ? ? ? const input = el.getElementsByTagName('input')[0];
? ? ? ? if (input) {
? ? ? ? ? ? // 調(diào)用input方法，加入正則校驗(yàn)的邏輯
? ? ? ? ? ? input.onkeyup = function(e) {
? ? ? ? ? ? ? ? if (input.value.length === 1) {
? ? ? ? ? ? ? ? ? ? input.value = input.value.replace(/[^0-9]/g, '');
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? input.value = input.value.replace(/[^\d]/g, '');
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 調(diào)用自定義事件
? ? ? ? ? ? ? ? trigger(input, 'input');
? ? ? ? ? ? };
? ? ? ? ? ? input.onblur = function(e) {
? ? ? ? ? ? ? ? if (input.value.length === 1) {
? ? ? ? ? ? ? ? ? ? input.value = input.value.replace(/[^0-9]/g, '');
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? input.value = input.value.replace(/[^\d]/g, '');
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? trigger(input, 'input');
? ? ? ? ? ? };
? ? ? ? }
? ? }
});
// 創(chuàng)建自定義事件
const trigger = (el, type) => {
? ? const e = document.createEvent('HTMLEvents');
? ? // 初始化默認(rèn)值
? ? e.initEvent(type, true, true);
? ? // 觸發(fā)自定義事件
? ? el.dispatchEvent(e);
};

2. 在需要正則校驗(yàn)正整數(shù)的文本框中使用指令 v-int

<el-input v-model="test" placeholder="請(qǐng)輸入" v-int></el-input>

這樣就可以實(shí)現(xiàn)文本框校驗(yàn)了，終于不需要網(wǎng)上各種雜七雜八的在input上加代碼這樣既簡(jiǎn)單可讀性又高。

下面是我網(wǎng)上搜索到的正則校驗(yàn)大全拿去不謝，需要用到哪些正則校驗(yàn)的文本框，可以創(chuàng)建多個(gè)自定義指令，然后在指定的input上加上指令就可以實(shí)現(xiàn)組合式正則校驗(yàn)，有一個(gè)簡(jiǎn)單粗暴的方法你學(xué)廢了嗎？

校驗(yàn)數(shù)字的正則表達(dá)式

1 '數(shù)字：'
? ?^[0-9]*$
?2 'n位的數(shù)字：'
? ?^\d{n}$
?3 '至少n位的數(shù)字：'
? ?^\d{n,}$
?4 'm-n位的數(shù)字：'
? ?^\d{m,n}$
?5 '零和非零開頭的數(shù)字：'
? ?^(0|[1-9][0-9]*)$
?6 '非零開頭的最多帶兩位小數(shù)的數(shù)字：'
? ?^([1-9][0-9]*)+(.[0-9]{1,2})?$
?7 '帶1-2位小數(shù)的正數(shù)或負(fù)數(shù)：'
? ?^(\-)?\d+(\.\d{1,2})?$
?8 '正數(shù)、負(fù)數(shù)、和小數(shù)：'
? ?^(\-|\+)?\d+(\.\d+)?$
?9 '有兩位小數(shù)的正實(shí)數(shù)：'
? ?^[0-9]+(.[0-9]{2})?$
10 '有1~3位小數(shù)的正實(shí)數(shù)：'
? ?^[0-9]+(.[0-9]{1,3})?$
11 '非零的正整數(shù)：'
? ?^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
12 '非零的負(fù)整數(shù)：'
? ?^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
13 '非負(fù)整數(shù)：'
? ?^\d+$ 或 ^[1-9]\d*|0$
14 '非正整數(shù)：'
? ?^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
15 '非負(fù)浮點(diǎn)數(shù)：'
? ?^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
16 '非正浮點(diǎn)數(shù)：'
? ?^((-\d+(\.\d+)?)|(0+(\.0+)?))$
? ?'或： '^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
17 '正浮點(diǎn)數(shù)：'
? ?^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$
? ?'或： '
? ?^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
18 '負(fù)浮點(diǎn)數(shù)：'
? ?^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$
? ?'或：'
? ?^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
19 '浮點(diǎn)數(shù)：'
? ?^(-?\d+)(\.\d+)?$
? ?'或：' ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

校驗(yàn)字符的正則表達(dá)式

1 '漢字：'
? ?^[\u4e00-\u9fa5]{0,}$
?2 '英文和數(shù)字：'
? ?^[A-Za-z0-9]+$
? ?'或：'^[A-Za-z0-9]{4,40}$
?3 '長(zhǎng)度為3-20的所有字符：'
? ?^.{3,20}$
?4 '由26個(gè)英文字母組成的字符串：'
? ?^[A-Za-z]+$
?5 '由26個(gè)大寫英文字母組成的字符串：'
? ?^[A-Z]+$
?6 '由26個(gè)小寫英文字母組成的字符串：'
? ?^[a-z]+$
?7 '由數(shù)字和26個(gè)英文字母組成的字符串：'
? ?^[A-Za-z0-9]+$
?8 '由數(shù)字、26個(gè)英文字母或者下劃線組成的字符串：'
? ?^\w+$
? ?'或：'^\w{3,20}$
?9 '中文、英文、數(shù)字包括下劃線：'
? ?^[\u4E00-\u9FA5A-Za-z0-9_]+$
10 '中文、英文、數(shù)字但不包括下劃線等符號(hào)：'
? ?^[\u4E00-\u9FA5A-Za-z0-9]+$
? ?'或： '^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
11 '可以輸入含有^%&',;=?$\"等字符：'
? ?[^%&',;=?$\x22]+
12 '禁止輸入含有~的字符：'
? ?[^~\x22]+

特殊需求正則表達(dá)

?1 'Email郵箱地址：'
? ?^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
? ?'或：' ?/^[A-Za-z0-9._%-]+@([A-Za-z0-9-]+\.)+[A-Za-z]{2,4}$/
?2 'url域名：'
? ?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
?3 'InternetURL：'
? ?[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
?4 '手機(jī)號(hào)碼：'
? ?^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
? ?'或：'/^1[3|4|5|7|8]\d{9}$/
?5 '電話號(hào)碼("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：'
? ?^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$?
?6 '國(guó)內(nèi)電話號(hào)碼(0511-4405222、021-87888822)：'
? ?\d{3}-\d{8}|\d{4}-\d{7}
?7 '身份證號(hào)：'
? ?'15或18位身份證：'
? ?^\d{15}|\d{18}$
? ?'15位身份證：'
? ?^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$
? ?'18位身份證：'
? ?^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$
?8 '短身份證號(hào)碼(數(shù)字、字母x結(jié)尾)：'
? ?^([0-9]){7,18}(x|X)?$
? ?'或： '^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
?9 '帳號(hào)是否合法(字母開頭，允許5-16字節(jié)，允許字母數(shù)字下劃線)：'
? ?^[a-zA-Z][a-zA-Z0-9_]{4,15}$
10 '密碼(以字母開頭，長(zhǎng)度在6~18之間，只能包含字母、數(shù)字和下劃線)：'
? ?^[a-zA-Z]\w{5,17}$
11 '強(qiáng)密碼(必須包含大小寫字母和數(shù)字的組合，不能使用特殊字符，長(zhǎng)度在8-10之間)：'
? ?^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ ?
12 '日期格式：'
? ?^\d{4}-\d{1,2}-\d{1,2}
13 '一年的12個(gè)月(01～09和1～12)：'
? ?^(0?[1-9]|1[0-2])$
14 '一個(gè)月的31天(01～09和1～31)：'
? ?^((0?[1-9])|((1|2)[0-9])|30|31)$?
15 '錢的輸入格式：'
? ?'1.有四種錢的表示形式我們可以接受:"10000.00" 和 "10,000.00", 和沒(méi)有 "分" 的 "10000" 和 "10,000"：'
? ?^[1-9][0-9]*$?
? ?'2.這表示任意一個(gè)不以0開頭的數(shù)字,但是,這也意味著一個(gè)字符"0"不通過(guò),所以我們采用下面的形式：'
? ?^(0|[1-9][0-9]*)$?
? ?'3.一個(gè)0或者一個(gè)不以0開頭的數(shù)字.我們還可以允許開頭有一個(gè)負(fù)號(hào)：'
? ?^(0|-?[1-9][0-9]*)$?
? ?'4.這表示一個(gè)0或者一個(gè)可能為負(fù)的開頭不為0的數(shù)字.讓用戶以0開頭好了.把負(fù)號(hào)的也去掉：'
? ?^[0-9]+(.[0-9]+)?$?
? ?'5.必須說(shuō)明的是,小數(shù)點(diǎn)后面至少應(yīng)該有1位數(shù),所以"10."是不通過(guò)的,但是 "10" 和 "10.2" 是通過(guò)的：'
? ?^[0-9]+(.[0-9]{2})?$?
? ?'6.這樣我們規(guī)定小數(shù)點(diǎn)后面必須有兩位,如果你認(rèn)為太苛刻了,可以這樣：'
? ?^[0-9]+(.[0-9]{1,2})?$?
? ?'7.這樣就允許用戶只寫一位小數(shù).下面我們?cè)摽紤]數(shù)字中的逗號(hào)了,我們可以這樣：'
? ?^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$?
? ?'8.1到3個(gè)數(shù)字,后面跟著任意個(gè) 逗號(hào)+3個(gè)數(shù)字,逗號(hào)成為可選,而不是必須：'
? ?^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$?
16 'xml文件：'
? ?^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
17 '中文字符的正則表達(dá)式：'
? ?[\u4e00-\u9fa5]
18 '雙字節(jié)字符：'
? ?[^\x00-\xff] ? ?(包括漢字在內(nèi)，可以用來(lái)計(jì)算字符串的長(zhǎng)度(一個(gè)雙字節(jié)字符長(zhǎng)度計(jì)2，ASCII字符計(jì)1))
19 '空白行的正則表達(dá)式：'
? ?\n\s*\r ? ?(可以用來(lái)刪除空白行)
20 'HTML標(biāo)記的正則表達(dá)式：'
? ?<(\S*?)[^>]*>.*?</\1>|<.*? />
22 '首尾空白字符的正則表達(dá)式：'
? ?^\s*|\s*$或(^\s*)|(\s*$)
23 '騰訊QQ號(hào)：'
? ?[1-9][0-9]{4,} ? ?(騰訊QQ號(hào)從10000開始)
24 '中國(guó)郵政編碼：'
? ?[1-9]\d{5}(?!\d) ? ?(中國(guó)郵政編碼為6位數(shù)字)
25 'IP地址：'
? ?\d+\.\d+\.\d+\.\d+ ? ?(提取IP地址時(shí)有用)
26 '不能為空：'
? ?/\S/
27 '匹配空行：'
? ?^(\s*)\n

3. 這個(gè)是判斷是否為金額的指令，可以控制是否為整數(shù)或者小數(shù)點(diǎn)

在HTML中使用

<el-input type="text" ?v-model="xx" v-input-limit='0'></el-input>//整數(shù)
<el-input type="text" ?v-model="xx" v-input-limit='1'></el-input>//一位小數(shù)
<el-input type="text" ?v-model="xx" v-input-limit='2'></el-input>//兩位小數(shù)

在JS里定義

Vue.directive("input-limit", {
? bind(el, binding) {
? ? var wins_0 = /[^\d]/g //整數(shù)判斷
? ? var wins_1 = /[^\d^\.]/g //小數(shù)判斷
? ? var flag = true;
? ? var points = 0;
? ? var lengths = 0
? ? var remainder = 0
? ? var no_int = 0
? ? const target = el instanceof HTMLInputElement ? el : el.querySelector("input");
? ? target.addEventListener("compositionstart", e => {
? ? ? flag = false;
? ? });
? ? target.addEventListener("compositionend", e => {
? ? ? flag = true;
? ? });
? ? target.addEventListener("input", e => {
? ? ? setTimeout(function() {
? ? ? ? if (flag) {
? ? ? ? ? if (binding.value == 0) {
? ? ? ? ? ? if (wins_0.test(e.target.value)) {
? ? ? ? ? ? ? e.target.value = e.target.value.replace(wins_0, "");
? ? ? ? ? ? ? e.target.dispatchEvent(new Event("input")) //手動(dòng)更新v-model值
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? if (binding.value == 1) {
? ? ? ? ? ? if (wins_0.test(e.target.value.toString().replace(/\d+\.(\d*)/, '$1'))) {
? ? ? ? ? ? ? remainder = true
? ? ? ? ? ? }
? ? ? ? ? ? if ((e.target.value.split('.')).length - 1 > 1) {
? ? ? ? ? ? ? points = true
? ? ? ? ? ? }
? ? ? ? ? ? if (e.target.value.toString().split(".")[1] != undefined) {
? ? ? ? ? ? ? if (e.target.value.toString().split(".")[1].length > 1) {
? ? ? ? ? ? ? ? lengths = true
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? if (e.target.value.toString().indexOf(".") != -1) {
? ? ? ? ? ? ? no_int = false
? ? ? ? ? ? } else {
? ? ? ? ? ? ? no_int = true
? ? ? ? ? ? }
? ? ? ? ? ? if (wins_1.test(e.target.value) || lengths || points || remainder) {
? ? ? ? ? ? ? if (!no_int) {
? ? ? ? ? ? ? ? e.target.value = e.target.value.replace(wins_1, "").replace('.', '$#$').replace(/\./g, '').replace(
? ? ? ? ? ? ? ? ? '$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').substring(0, e.target.value.indexOf(
? ? ? ? ? ? ? ? ? ".") + 2)
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? e.target.value = e.target.value.replace(wins_0, "")
? ? ? ? ? ? ? }
? ? ? ? ? ? ? e.target.dispatchEvent(new Event("input"))
? ? ? ? ? ? }
? ? ? ? ? }
?
?
? ? ? ? ? if (binding.value == 2) {
? ? ? ? ? ? if (wins_0.test(e.target.value.toString().replace(/\d+\.(\d*)/, '$1'))) {
? ? ? ? ? ? ? remainder = true
? ? ? ? ? ? }
? ? ? ? ? ? if ((e.target.value.split('.')).length - 1 > 1) {
? ? ? ? ? ? ? points = true
? ? ? ? ? ? }
? ? ? ? ? ? if (e.target.value.toString().split(".")[1] != undefined) {
? ? ? ? ? ? ? if (e.target.value.toString().split(".")[1].length > 2) {
? ? ? ? ? ? ? ? lengths = true
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? if (e.target.value.toString().indexOf(".") != -1) {
? ? ? ? ? ? ? no_int = false
? ? ? ? ? ? } else {
? ? ? ? ? ? ? no_int = true
? ? ? ? ? ? }
? ? ? ? ? ? if (wins_1.test(e.target.value) || lengths || points || remainder) {
? ? ? ? ? ? ? if (!no_int) {
? ? ? ? ? ? ? ? e.target.value = e.target.value.replace(wins_1, "").replace('.', '$#$').replace(/\./g, '').replace(
? ? ? ? ? ? ? ? ? '$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').substring(0, e.target.value.indexOf(
? ? ? ? ? ? ? ? ? ".") + 3)
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? e.target.value = e.target.value.replace(wins_0, "")
? ? ? ? ? ? ? }
? ? ? ? ? ? ? e.target.dispatchEvent(new Event("input"))
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? }, 0)
? ? })
? }
})

vue正整數(shù)校驗(yàn)規(guī)則及說(shuō)明

{ required: true, message: '請(qǐng)輸入', trigger: 'blur' },
      {
        type: 'number',
        message: '請(qǐng)輸入正整數(shù)',
        trigger: 'blur',
        transform(value) {
          if(value !== null && value !== '') {
            if (String(value).trim() === '' || Number(value) <= 0) {
              return false
            }else if (String(value).indexOf('.') !== -1 || String(value).indexOf('-') !== -1) {
              return false
            }else{
              return Number(value)
            }
          }else {
            return null
          }
        }
      }

offset: [
      { required: true, message: '請(qǐng)輸入點(diǎn)位地址'},
      { type: 'number',
        message: '請(qǐng)輸入正整數(shù)',
        trigger: 'blur',
        transform (value) {
          if (!/^[1-9]\d*$/.test(value)) {
            return true
          }else{
          }
        }
      }
    ],

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

您可能感興趣的文章: