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

javascript正則表達(dá)配置擴(kuò)展名并實(shí)現(xiàn)驗(yàn)證

 更新時(shí)間：2022年02月22日 14:23:54   作者：妮可是條狗  
這篇文章主要介紹了javascript正則表達(dá)配置擴(kuò)展名并實(shí)現(xiàn)驗(yàn)證，文章圍繞主題展開(kāi)相關(guān)資料，具有以得參考價(jià)值，需要的小伙伴可以參考一下

項(xiàng)目需求：

  • 1.通過(guò)下拉菜單，可配置包含或者不包含某個(gè)字符串的文件名，字符串支持輸入；必須以.xml為結(jié)尾
  • 2.可動(dòng)態(tài)添加、刪除配置行；
  • 3.點(diǎn)擊【開(kāi)始生成】按鈕，根據(jù)配置的擴(kuò)展名生成相應(yīng)正則表達(dá)式；
  • 4.輸入需要測(cè)試的文件名，進(jìn)行正則驗(yàn)證；
  • 5.點(diǎn)擊【確定】按鈕，將配置的正則表達(dá)式提交至后臺(tái)；

如下圖：

最初需求還有一個(gè)“并且/或者”的下拉菜單選項(xiàng)，其中“或者”不好實(shí)現(xiàn)，和產(chǎn)品溝通后只保留了“并且”，有思路的朋友歡迎留言，一起探討。

實(shí)現(xiàn)思路：

1.首先實(shí)現(xiàn)配置內(nèi)容，點(diǎn)擊【增加】按鈕添加一行表單，點(diǎn)擊【刪除】按鈕刪除當(dāng)前行；定義一個(gè)空數(shù)組regArray，每一行表單為一個(gè)對(duì)象：regArray: [{}]，添加時(shí)regArray.push({})，刪除時(shí)regArray.splice(index, 1)

 模板（template）:

<el-row v-for="(item, index) in regInfo.regArray" :key="index">
? <el-form>
? ? <el-form-item>
? ? ? <!-- 包含/不包含 -->
? ? ? <el-select ?v-model="regInfo.regArray[index].include" placeholder="請(qǐng)選擇">
? ? ? ? <el-option v-for="item in include" :key="item.id" :label="item.label" :value="item.value">
? ? ? ? </el-option>
? ? ? </el-select>
? ? ? <!-- 下拉選項(xiàng)，filterable allow-create default-first-option為可輸入屬性 -->
? ? ? <el-select v-model="regInfo.regArray[index].type" placeholder="請(qǐng)選擇" filterable allow-create default-first-option>
? ? ? ? <el-option v-for="item in type" :key="item.id" :label="item.label" :value="item.value">
? ? ? ?</el-option>
? ? ? </el-select>
? ? ? <el-button type="text" @click="delReg(index)" v-if="index > 0">刪除</el-button>
? ? </el-form-item>
? </el-form>
</el-row>
<button class="addBtn" @click="addReg()">添加</button>

script:

data() {
? return {
? ? regInfo: { regArray: [{}] }, // 配置內(nèi)容表單
? ? ? include: [
? ? ? ? { id: "0", label: "包含", value: "include" },
? ? ? ? { id: "1", label: "不包含", value: "exclusive" },
? ? ? ],
? ? ? type: [
? ? ? ? { id: "0", label: ".meta", value: ".meta" },
? ? ? ? { id: "1", label: ".mqcs", value: ".mqcs" },
? ? ? ],
? ? };
}

methods: {
? ? // 增加一行表單
? ? addReg() {
? ? ? // 定義lastIndex為最后一行索引
? ? ? let lastIndex = this.regInfo.regArray.length - 1;
? ? ? // 必須輸入當(dāng)前行才能添加下一行
? ? ? if (
? ? ? ? isEmpty(this.regInfo.regArray[lastIndex].include) ||
? ? ? ? isEmpty(this.regInfo.regArray[lastIndex].type)
? ? ? ) {
? ? ? ? this.$message.error("請(qǐng)配置當(dāng)前行后再進(jìn)行添加");
? ? ? } else {
? ? ? ? this.regInfo.regArray.push({}); //添加一行表單
? ? ? }
? ? },
? ? // 刪除一行表單
? ? delReg(index) {
? ? ? this.regInfo.regArray.splice(index, 1);
? ? },
}
  • 2.點(diǎn)擊【開(kāi)始生成】按鈕生成相應(yīng)正則表達(dá)式，正則規(guī)則需要按照不包含+包含的順序進(jìn)行組合，將表單大數(shù)組循環(huán)，拆成不包含、包含兩個(gè)小數(shù)組，分別拿到值再進(jìn)行拼接；如果表單為空，則直接生成驗(yàn)證.xml為后綴的表達(dá)式

template:

<el-form ref="regForm" :model="regForm">
? <el-form-item>
? ? <el-input v-model="regForm.reg" disabled></el-input>
? </el-form-item>
</el-form>
<el-button @click="createReg()">開(kāi)始生成</el-button>

script:

data() {
? return {
? ? regForm: {?
? ? ? reg: "", // 生成的表達(dá)式
? ? },
}

methods: {
? // 生成表達(dá)式
? createReg() {
? ? //拿到大數(shù)組，循環(huán)，將包含與不包含分成兩個(gè)數(shù)組進(jìn)行重組
? ? let arr1 = []; //不包含的數(shù)組
? ? let arr2 = []; //包含的數(shù)組
? ? this.regInfo.regArray.forEach((item) => {
? ? ? if (item.include == "exclusive") { // 如果是不包含的
? ? ? ? arr1.push(item);
? ? ? } else if (item.include == "include") { // 如果是包含的
? ? ? ? arr2.push(item);
? ? ? }
? ? });
? ? // 如果第一行為空 直接生成.xml后綴的表達(dá)式
? ? if (isEmpty(this.regInfo.regArray[0].include) || isEmpty(this.regInfo.regArray[0].type)) {
? ? ? this.regForm.reg = `.*.xml$`;
? ? } else {
? ? ? let regTxt1 = "";
? ? ? let regTxt2 = "";
? ? ? // 處理不包含的數(shù)組
? ? ? arr1.forEach((item, index) => {
? ? ? ? regTxt1 += `(?<!${item.type})`;
? ? ? });
? ? ? // 2.處理包含的數(shù)組
? ? ? arr2.forEach((item, index) => {
? ? ? ? regTxt2 += `(${item.type})`;
? ? ? });
? ? ? this.regForm.reg = ".*" + regTxt1 + regTxt2 + "(.xml)$"; // 進(jìn)行拼接
? ? }
? }
}
  • 3.輸入想要驗(yàn)證的文件名，點(diǎn)擊【開(kāi)始驗(yàn)證】，驗(yàn)證是否通過(guò)

template:

<el-form ref="validationForm" :model="validationForm">
? <el-form-item>
? ? <el-input v-model="validationForm.reg"></el-input>
? </el-form-item>
</el-form>
<el-button @click="validationReg()">開(kāi)始驗(yàn)證</el-button>
<div>
? <el-tag type="success" v-if="isReg == 1">驗(yàn)證通過(guò)</el-tag>
? <el-tag type="danger" v-else-if="isReg == 2">驗(yàn)證失敗</el-tag>
</div>

data() {
? return {
? ? validationForm: {
? ? ? reg: "", // 輸入需要驗(yàn)證的文件名
? ? },
? ? isReg: 0, //驗(yàn)證后顯示相應(yīng)提示 1驗(yàn)證通過(guò) 2驗(yàn)證失敗
}
methods: {
? // 驗(yàn)證表達(dá)式
? validationReg() {
? ? // this.regForm.reg // 生成的正則表達(dá)式
? ? // this.validationForm.reg // 需要進(jìn)行驗(yàn)證的文件名
? ? if (isEmpty(this.regForm.reg)) {
? ? ? this.$message.error("請(qǐng)生成正則表達(dá)式");
? ? } else if (isEmpty(this.validationForm.reg)) {
? ? ? this.$message.error("請(qǐng)輸入需要驗(yàn)證的正則表達(dá)式");
? ? } else {
? ? ? var reg = new RegExp(this.regForm.reg.replace(".", "\\.")); // 對(duì).進(jìn)行轉(zhuǎn)義
? ? ? if (reg.test(this.validationForm.reg)) {
? ? ? ? this.isReg = 1; // 驗(yàn)證成功
? ? ? } else {
? ? ? ? this.isReg = 2; // 驗(yàn)證失敗
? ? ? }
? ? }
? },
}
  • 4.點(diǎn)擊【確定】按鈕，將正則表達(dá)式提交至后臺(tái)

template：

<div slot="footer">
? <el-button @click="cancel()">取消</el-button>
? <el-button @click="submit()">確定</el-button>
</div>

script:

// 保存提交
submit() {
? this.$ajax.post(接口地址, this.regForm.reg).then((res) => {
? ? if (res.data.code == 200) {
? ? ? this.$message.success("添加成功");
? ? }}).catch((err) => {console.log(err)});
},

isEmpty為封裝的判斷字符串是否為空的方法

export const isEmpty = (obj) => {
? if(typeof obj == "undefined" || obj == null || obj == ""){
? ? return true;
? }else{
? ? return false;
? }
}

到此這篇關(guān)于javascript正則表達(dá)配置擴(kuò)展名并實(shí)現(xiàn)驗(yàn)證的文章就介紹到這了,更多相關(guān)javascript配置擴(kuò)展名內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論