javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > javascript配置扩展名

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

作者:妮可是条狗

这篇文章主要介绍了javascript正则表达配置扩展名并实现验证,文章围绕主题展开相关资料,具有以得参考价值,需要的小伙伴可以参考一下

项目需求:

如下图:

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

实现思路:

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

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)$"; // 进行拼接
    }
  }
}

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; // 验证失败
      }
    }
  },
}

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

到此这篇关于javascript正则表达配置扩展名并实现验证的文章就介绍到这了,更多相关javascript配置扩展名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文