关于项目统一表单验证问题

最新推荐文章于 2024-09-30 14:28:41 发布

落落落落落落落落

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量252

点赞数 1

分类专栏： HTML 实用小功能文章标签： js javascript vue

本文链接：https://blog.csdn.net/qq_34837006/article/details/114583147

版权

HTML 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

实用小功能

2 篇文章 0 订阅

订阅专栏

          <div v-for="(item, index) in setInput" :key="index">
            <p><span class="redDian">*</span>&nbsp;{{item.name}}</p>
            <input :data-typeId="item.typeId" :data-itemModel="item.inputModel" class="formVerify" v-if="item.type == 'number'" v-model="item.inputModel" :placeholder="'请输入' + item.name" :type="item.type" :maxlength="item.maxlength" oninput="if(value.length>11)value=value.slice(0,11)" pattern="[0-9]*" name="" id="">
            <input :data-typeId="item.typeId" :data-itemModel="item.inputModel" class="formVerify" v-if="item.type == 'text' && index != 3" v-model="item.inputModel" :placeholder="'请输入' + item.name" :type="item.type" name="" id="">
            <div :data-typeId="item.typeId" :data-itemModel="questionType" class="formVerify" :class="questionType ? 'c-fc-xblack' : 'c-fc-sgray'" v-if="index == 3" @click="openQuestionType" :type="item.type">{{questionType ? questionType : '请选择' + item.name}}</div>
          </div>
          <div @click="checkbox = !checkbox">
            <span :data-typeId="5" :data-itemModel="checkbox" class="formVerify" :class="checkbox ? 'fcPink' : 'c-fc-gray'">{{checkbox ? '&#xe62b;' : '&#xe741;'}}</span>
            <span>提交即视为已同意<span class="fcPink" @click.stop="showHelp = true;">《个人信息授权与保护声明》</span></span>
            <img @click.stop="getCode" src="@/assets/images/register/but.png" alt="">
          </div>

      setInput: [ // 表单循环数据
        { name: '姓名', inputModel: '', type: 'text', maxlength: 20, typeId: 1, },
        { name: '电话', inputModel: '', type: 'number', maxlength: 11, typeId: 2, },
        { name: '公司名称', inputModel: '', type: 'text', maxlength: 20, typeId: 3, },
        { name: '职位名称', inputModel: '', type: 'text', maxlength: 100, typeId: 4, },
      ],



    // 打开验证码提交数据弹窗
    getCode() {
      let tabItem = document.getElementsByClassName('formVerify');
      let msg = '';
      for (var i = 0; i < tabItem.length; i++) {
        msg = this.authenTication(tabItem[i].dataset.itemmodel, tabItem[i].dataset.typeid);
        if (msg) {
          utilJs.showAlert({msg: msg}); // 弹窗
          break;
        }
      }
      if (msg) {
        return;
      }
      this.$nextTick(() => {
        this.showCode = true;
        this.telphone = this.setInput[1].inputModel;
      })
    },




    authenTication(item, type) {
      // 1 姓名 2 电话 3 公司名称 4 职位名称 5 勾选个人协议
      let msg = '';
      let tication = {
        1: () => {
          console.log(item, 'item')
          if (item == '' || item.length > 20) {
            msg = item == '' ? '姓名不能为空' : '姓名输入不能超过20个字'
          }
        },
        2: () => {
          let tel = /^[1][3,4,5,7,8,9][0-9]{9}$/;
          if (tel.test(item) == false || item.length != 11) {
            msg = '请输入正确的手机号'
          }
        },
        3: () => {
          if (item == '' || item > 20) {
            msg = item == '' ? '请输入公司名称' : '公司名称输入不能超过20个字'
          }
        },
        4: () => {
          if (item == '') {
            msg = '请选择职位名称'
          }
        },
        5: () => {
          if (item == false) {
            msg = '请勾选个人授权声明'
          }
        },
      }
      tication[type] && tication[type]();
      return msg;
    },

通过将表单验证提取成公共方法，并且传入参数进行判断是否验证通过