vue表单el-form-item校验电话、身份证号以及多个prop

最新推荐文章于 2024-06-04 14:59:00 发布

小香菜籽

最新推荐文章于 2024-06-04 14:59:00 发布

阅读量1.1k

点赞数 2

分类专栏： vue项目中的问题（一）文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46858417/article/details/128197843

版权

vue项目中的问题（一）专栏收录该内容

26 篇文章 1 订阅

订阅专栏

vue表单el-form-item校验电话、身份证号以及多个prop

校验电话

 <el-form-item
            label="联系电话(手机)："
            prop="baseIphone"
            :rules="[
              { required: true, message: '请输入手机号码', trigger: 'change' },
              { validator: checkPhone, trigger: 'change' },
            ]"
          >
            <el-input
              v-model="editForm.baseIphone"
              auto-complete="off"
              placeholder="请输入联系电话(手机)"
            ></el-input>
          </el-form-item>

methods: {
    checkPhone(rule, value, callback) {
      if (!/^1[34578]\d{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号码!"));
      }
    },
    }

校验身份证号

<el-form-item
            label="身份证号："
            prop="baseIdNum"
            :rules="[
              { required: true, message: '请填写证件号码', trigger: 'change' },
              { validator: checkIdentity, trigger: 'change' },
            ]"
          >
            <el-input
              v-model="editForm.baseIdNum"
              auto-complete="off"
              placeholder="请输入身份证号"
            ></el-input>
          </el-form-item>

methods: {
   checkIdentity (rule, value, callback) {
      if (
        !/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/.test(
          value
        )
      ) {
        callback(new Error("请输入正确的证件号码!"));
      }
    },
    }

校验多个prop

在这里插入图片描述
方式可能比较简单粗暴
直接套了多个el-form-item，然后调了一下样式

<el-form-item label="户口所在地：" prop="baseDomicilePlaceProvince">   //单独写prop 
            <div class="Address" style="display: flex; margin-bottom: -10px">
              <el-form-item              //第一个可以不写 直接写到上一级
                ><el-select
                  v-model="editForm.baseDomicilePlaceProvince"
                  filterable
                  clearable
                  placeholder="请选择省"
                  @change="changePlaceProvince"
                >
                  <el-option
                    v-for="item in AllProvinceList"
                    :key="item.chinaId"
                    :label="item.chinaName"
                    :value="item.chinaId"
                  >
                  </el-option> </el-select
              ></el-form-item>
              <el-form-item prop="baseDomicilePlaceCity"   //单独写prop
                ><el-select
                  v-model="editForm.baseDomicilePlaceCity"
                  filterable
                  placeholder="请选择市"
                  clearable
                  @change="changePlaceCity"
                >
                  <el-option
                    v-for="item in AllCityList"
                    :key="item.chinaId"
                    :label="item.chinaName"
                    :value="item.chinaId"
                  >
                  </el-option> </el-select
              ></el-form-item>
              <el-form-item prop="baseDomicilePlaceCounty"  //单独写prop
                ><el-select
                  v-model="editForm.baseDomicilePlaceCounty"
                  filterable
                  clearable
                  placeholder="请选择县或区"
                  v-if="noHaveCount"
                >
                  <el-option
                    v-for="item in AllDistrictList"
                    :key="item.chinaId"
                    :label="item.chinaName"
                    :value="item.chinaId"
                  >
                  </el-option> </el-select
              ></el-form-item>
            </div>
          </el-form-item>