下拉框判断正则

最新推荐文章于 2024-03-13 09:26:05 发布

归途风景111

最新推荐文章于 2024-03-13 09:26:05 发布

阅读量540

点赞数 1

分类专栏： vue javascript 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_58032613/article/details/126759084

版权

vue 同时被 2 个专栏收录

54 篇文章 4 订阅

订阅专栏

javascript

32 篇文章 2 订阅

订阅专栏

下拉框判断正则

我在写一个项目的时候遇到了这样一个问题，根据左侧下拉框来判断右侧input框的正则表达式
在这里插入图片描述

代码

废话不多说，下面我们直接上代码

 <a-row class="form-row" :gutter="16">
                  <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item label="证件类型">
                      <a-select v-model="value" placeholder="居民身份证" style="width: 300px" @change="handleChange">
                        <a-select-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                          {{ item.label }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item label="证件号">
                      <a-input
                        :disabled="IDNumber"
                        maxLength="50"
                        v-decorator="[
                          'IDNumber',
                          {
                            rules: [
                              {
                                pattern: rezs,
                                message: '证件号格式错误',
                              },
                              { pattern: /^[^\s]*$/, message: '禁止输入空格' },
                            ],
                          },
                        ]"
                        placeholder="请输入证件号"
                      />
                    </a-form-item>
                  </a-col>
              </a-row>

首先我要在下拉框里面加上一个chang事件

看到API文档里面写到chang事件里面的参数有（value, key, column）首先查看chang事件里面的value值，然后再根据select下拉框的值去判断需要那个正则

  handleChange(value, key, column) {
      if (this.value == '1') {
      // 身份证的正则
        this.rezs = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
      } else if (this.value == '2') {
      // 护照的正则
        this.rezs = /(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/
      } else if (this.value == '3') {
      // 港澳通行证的正则
        this.rezs = /^[HMhm]{1}([0-9]{10}|[0-9]{8})$/
      } else if (this.value == '4') {
      // 台湾居民通行证的正则
        this.rezs = /^\\d{8}|^[a-zA-Z0-9]{10}|^\\d{18}$/
      }
      //console.log(value, key, column)
      const newData = [...this.dataList]
      const target = newData.filter((item) => key === item.key)[0]
      if (target) {
        target[column] = value
        this.dataList = newData
      }
    },