欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

javascript正则表达配置扩展名并实现验证

时间:2023-03-13 12:12:34|栏目:JavaScript代码|点击:

项目需求:

  • 1.通过下拉菜单,可配置包含或者不包含某个字符串的文件名,字符串支持输入;必须以.xml为结尾
  • 2.可动态添加、删除配置行;
  • 3.点击【开始生成】按钮,根据配置的扩展名生成相应正则表达式;
  • 4.输入需要测试的文件名,进行正则验证;
  • 5.点击【确定】按钮,将配置的正则表达式提交至后台;

如下图:

最初需求还有一个“并且/或者”的下拉菜单选项,其中“或者”不好实现,和产品沟通后只保留了“并且”,有思路的朋友欢迎留言,一起探讨。

实现思路:

1.首先实现配置内容,点击【增加】按钮添加一行表单,点击【删除】按钮删除当前行;定义一个空数组regArray,每一行表单为一个对象:regArray: [{}],添加时regArray.push({}),删除时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="请选择">
        <el-option v-for="item in include" :key="item.id" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <!-- 下拉选项,filterable allow-create default-first-option为可输入属性 -->
      <el-select v-model="regInfo.regArray[index].type" placeholder="请选择" 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: [{}] }, // 配置内容表单
      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;
      // 必须输入当前行才能添加下一行
      if (
        isEmpty(this.regInfo.regArray[lastIndex].include) ||
        isEmpty(this.regInfo.regArray[lastIndex].type)
      ) {
        this.$message.error("请配置当前行后再进行添加");
      } else {
        this.regInfo.regArray.push({}); //添加一行表单
      }
    },
    // 删除一行表单
    delReg(index) {
      this.regInfo.regArray.splice(index, 1);
    },
}
  • 2.点击【开始生成】按钮生成相应正则表达式,正则规则需要按照不包含+包含的顺序进行组合,将表单大数组循环,拆成不包含、包含两个小数组,分别拿到值再进行拼接;如果表单为空,则直接生成验证.xml为后缀的表达式

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()">开始生成</el-button>

script:

data() {
  return {
    regForm: { 
      reg: "", // 生成的表达式
    },
}

methods: {
  // 生成表达式
  createReg() {
    //拿到大数组,循环,将包含与不包含分成两个数组进行重组
    let arr1 = []; //不包含的数组
    let arr2 = []; //包含的数组
    this.regInfo.regArray.forEach((item) => {
      if (item.include == "exclusive") { // 如果是不包含的
        arr1.push(item);
      } else if (item.include == "include") { // 如果是包含的
        arr2.push(item);
      }
    });
    // 如果第一行为空 直接生成.xml后缀的表达式
    if (isEmpty(this.regInfo.regArray[0].include) || isEmpty(this.regInfo.regArray[0].type)) {
      this.regForm.reg = `.*.xml$`;
    } else {
      let regTxt1 = "";
      let regTxt2 = "";
      // 处理不包含的数组
      arr1.forEach((item, index) => {
        regTxt1 += `(?<!${item.type})`;
      });
      // 2.处理包含的数组
      arr2.forEach((item, index) => {
        regTxt2 += `(${item.type})`;
      });
      this.regForm.reg = ".*" + regTxt1 + regTxt2 + "(.xml)$"; // 进行拼接
    }
  }
}
  • 3.输入想要验证的文件名,点击【开始验证】,验证是否通过

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()">开始验证</el-button>
<div>
  <el-tag type="success" v-if="isReg == 1">验证通过</el-tag>
  <el-tag type="danger" v-else-if="isReg == 2">验证失败</el-tag>
</div>

data() {
  return {
    validationForm: {
      reg: "", // 输入需要验证的文件名
    },
    isReg: 0, //验证后显示相应提示 1验证通过 2验证失败
}
methods: {
  // 验证表达式
  validationReg() {
    // this.regForm.reg // 生成的正则表达式
    // this.validationForm.reg // 需要进行验证的文件名
    if (isEmpty(this.regForm.reg)) {
      this.$message.error("请生成正则表达式");
    } else if (isEmpty(this.validationForm.reg)) {
      this.$message.error("请输入需要验证的正则表达式");
    } else {
      var reg = new RegExp(this.regForm.reg.replace(".", "\\.")); // 对.进行转义
      if (reg.test(this.validationForm.reg)) {
        this.isReg = 1; // 验证成功
      } else {
        this.isReg = 2; // 验证失败
      }
    }
  },
}
  • 4.点击【确定】按钮,将正则表达式提交至后台

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;
  }
}

上一篇:js 实现数值的千分位及保存小数方法(推荐)

栏    目:JavaScript代码

下一篇:微信小程序实现列表项左滑删除效果

本文标题:javascript正则表达配置扩展名并实现验证

本文地址:http://www.codeinn.net/misctech/227360.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有