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

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



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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: el-form 是饿了么团队开发的一款基于 Vue.js 的表单组件库,用于快速创建表单页面。它提供了丰富的表单元素和验证规则,但在默认情况下,其外观可能不够美观。 要美化 el-form 表单,我们可以使用以下方法: 1. 使用自定义样式:使用 CSS 或者 SCSS 来为 el-form 添加自定义样式,包括改变元素的颜色、背景、边框等属性,以及调整元素的尺寸和间距。 2. 使用内置样式:el-form 提供了一些内置的 class 和样式,可以直接在 HTML 中使用它们,例如:el-form--medium、el-form--small,el-button--primary 等。通过使用这些内置样式,我们可以快速改变表单的外观。 3. 使用插槽(slot):el-form 提供了多个插槽,我们可以自定义表单的布局和外观,以满足项目的需求。比如可以使用 label-width 插槽来设置标签的宽度,使用 label-class-name 插槽来添加自定义的类名,以及使用 error 插槽来自定义错误信息提示的样式。 4. 使用第三方组件库:如果 el-form 的默认样式无法满足需求,我们还可以选择使用第三方组件库,比如 Element Plus、Ant Design Vue 等,它们提供了更多的表单样式和组件,可以更好地满足美化需求。 总之,美化 el-form 表单有多种方法,可以通过自定义样式、使用内置样式、使用插槽、或者使用第三方组件库来实现。根据具体需求和项目情况,选择合适的方法,能够帮助我们更好地美化 el-form 表单。 ### 回答2: el-form是Element UI库中提供的一种表单组件,用于快速构建Web应用程序中的表单功能。为了美化el-form表单,可以采取以下几个步骤: 1.样式调整:可以通过修改el-form组件的class或者使用CSS样式来修改表单的外观。可以更改字体、颜色、边框等属性,以达到更好的美化效果。 2.布局调整:根据实际需求,可以通过设置el-form组件的属性来调整表单的布局。例如,可以设置表单的列数、间距、对齐方式等,使得表单在页面中更加整齐和美观。 3.组件定制:Element UI库提供了丰富的表单组件,如输入框、选择框、日期选择器等。可以根据实际需求,选择合适的组件并进行定制,以满足特定的美化要求。可以修改字体、颜色、边框等属性,使得组件与整体表单风格统一。 4.交互效果:为了使表单更加动态和有趣,可以添加一些交互效果。可以通过Vue.js的动画效果或者Element UI库中提供的过渡效果来为表单添加动态效果,如淡入淡出、滑动等,从而提升用户体验。 总之,美化el-form表单的关键在于调整样式、布局和组件定制。通过合理的设计和布置,可以使表单在视觉上更加美观、易用,提升用户体验。同,还可以加入一些动态效果,增加表单的交互性,进一步提高用户对表单的关注度和使用度。 ### 回答3: el-form 是饿了么团队开发的一款基于 Vue.js 的表单组件,它提供了丰富的表单输入控件和验证功能。el-form 本身已经具有一定的美观性,但如果想要进一步美化 el-form,可以通过以下几种方式实现: 1. 自定义样式:可以通过在 el-form 上添加自定义的 CSS 类或内联样式,来修改表单的外观。可以修改表单的背景色、字体颜色、边框样式等,以符合设计要求。 2. 使用 slot 插槽:el-form 组件提供了多个 slot 插槽,可以在这些插槽中自定义表单的布局和样式。例如,可以使用 label slot 自定义表单项的标签样式,使用 error slot 来展示验证错误信息的样式。 3. 配置主题:el-form 支持配置主题颜色,可以通过修改主题颜色来改变整个表单的色调。可以在 el-form 上添加 theme 属性,指定想要的主题颜色,例如 "light" 或 "dark"。 4. 使用第三方样式库:除了自定义样式,也可以引入第三方 CSS 样式库来美化 el-form。例如,可以使用 Bootstrap 或 Element-UI 提供的样式库,来增加更多的样式选择和美观效果。 总结来说,el-form 表单组件已经具有一定的美观性,但如果需求更多样式上的定制,可以通过自定义样式、使用插槽、配置主题或引入第三方样式库来进行美化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值