我在实际项目开发中遇到的关于ElementUI各种表单验证

栏目: IT技术 · 发布时间: 4年前

内容简介：:warning:什么电话、邮箱、数字、英文、汉字…等能用正则验证都可以用这个方式。

我在实际项目开发中遇到的关于ElementUI各种表单验证 

<el-form-item
  label="委托方"
  prop="real_operator_id"
>
    <operators-select v-model="form.real_operator_id"></operators-select>
</el-form-item>

rules: {
  real_operator_id: {required: true, message: '请选择委托方', trigger: 'change'}
}

第二种 正则验证字段

我在实际项目开发中遇到的关于ElementUI各种表单验证 

<el-form-item
  label="容纳人数"
  prop="capacity"
>
  <el-input
    v-model="form.capacity"
    placeholder="请输入容纳人数"
  ></el-input>
</el-form-item>

rules:{
  capacity: [
    {required: true, message: '请输入容纳人数', trigger: 'change'},
    {pattern: /^[1-9][0-9]{0,3}$/, message: '只能输入正整数，且不超过4位数', trigger: 'change'}],
}

:warning:什么电话、邮箱、数字、英文、汉字…等能用正则验证都可以用这个方式。

第三种 富文本必填验证

我在实际项目开发中遇到的关于ElementUI各种表单验证 

<el-form-item
  label="政策内容"
  prop="content"
>
  <Tinymce
    ref="editor"
    v-model="form.content"
    :height="300"
  />
  <el-input
    v-model="form.content"
   
  ></el-input>
</el-form-item>

rules: {
  content: [
    {required: true, message: '请填写政策内容', trigger: 'change'}
  ],
}

这里采用一个骚操作，原本输入框的验证都是监听的输入框的各种事件（change,blur）,然而富文本都是第三方插件，无法监听到，所以就利用了vue的双向绑定原理，写一个隐藏的输入框，搞定。

第四种 多个输入框

我在实际项目开发中遇到的关于ElementUI各种表单验证 

<el-form-item
  label="关联写字楼"
  prop="building_id"
>
  <div>
    <el-select
      v-model="form.building_id"
      filterable
      remote
      placeholder="请输入写字楼名称"
      :remote-method="getProjectLists"
      :loading="loading"
      @change="getBuilding">
        <el-option
          v-for="item in projectOptions"
          :key="item.id"
          :label="item.project_name"
          :value="item.id">
        </el-option>
    </el-select>
    <el-select
     
      v-if="form.building_id"
      v-model="form.building_detail.id"
      placeholder="请选择楼栋"
      @change="getUnit">
        <el-option
          v-for="item in buildingList"
          :key="item.id"
          :label="item.building_name"
          :value="item.id">
        </el-option>
    </el-select>
    <el-select
     
      v-if="unitList.length && form.building_detail.id"
      v-model="form.building_detail.unit_id"
      placeholder="请选择单元"
      @change="changeUnit">
        <el-option
          v-for="item in unitList"
          :key="item.id"
          :label="item.unit"
          :value="item.id">
        </el-option>
    </el-select>
    <numberInput
      :append="'层'"
      :isDecimal="false"
      :intlength="4"
      :placeholder="'请输入楼层'"
      v-model="form.building_detail.floor"></numberInput>
  </div>
</el-form-item>

data() {
  let checkBuilding = (rule, value, callback) => {
	if (!this.form.building_id) {
		callback(new Error('请选择写字楼'));
	} else if (!this.form.building_detail.id) {
		callback(new Error('请选择楼栋'));
	} else if (this.unitList.length && !this.form.building_detail.unit_id) {
		callback(new Error('请选择单元'));
	} else if (!this.form.building_detail.floor) {
		callback(new Error('请填写楼层'));
	} else {
		callback();
	}
  };
  return {
    rules: {
      building_id: {required: true, validator: checkBuilding, trigger: 'change'},
    }
  }
}

第五种 动态验证-普通的动态验证

我在实际项目开发中遇到的关于ElementUI各种表单验证

官网拷贝的代码，占个位置。

<el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input>
    <el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>

第六种 动态验证-多个输入框验证

我在实际项目开发中遇到的关于ElementUI各种表单验证

第一种情况 每个输入框单独验证

在样式很好控制的情况下,循环生成多个 <el-form-item> ,单独验证 

<div
  v-for="(item,index) in form.project"
  :key="index"
>
<div>
  <el-form-item
    :label="index==0?'关联写字楼':''"
    :prop="'project.' + index + '.project_id'"
    :rules="{required: true, message: '请选择关联写字楼', trigger: 'blur'}">
      <el-select
        v-model="item.project_id"
        filterable
        clearable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        :remote-method="getProjectLists"
        :loading="loading"
        @change="projectChange($event,index)">
          <el-option
            v-for="item in projectOptions"
            :key="item.id"
            :label="item.project_name"
            :value="item.id">
          </el-option>
      </el-select>
  </el-form-item>
  <el-form-item
    label-width="20px"
    :prop="'project.' + index + '.building_id'"
    :rules="{required: true, message: '请选择关联写字楼楼栋', trigger: 'blur'}">
      <el-select
        v-model="item.building_id"
        placeholder="请选择楼栋"
        @change="buildChange($event,index)">
          <el-option
            v-for="item in item.buildOptions"
            :key="item.id"
            :label="item.building_name"
            :value="item.id">
          </el-option>
      </el-select>
  </el-form-item>
  <el-form-item
    v-if="item.unitOptions && item.unitOptions.length"
    label-width="20px"
    :prop="'project.' + index + '.unit_id'"
    :rules="{required: true, message: '请选择关联写字楼单元', trigger: 'blur'}">
      <el-select
        v-model="item.unit_id"
        placeholder="请选择单元">
        <el-option
          v-for="item1 in item.unitOptions"
          :key="item1.id"
          :label="item1.unit"
          :value="item1.id">
        </el-option>
      </el-select>
  </el-form-item>
  <el-form-item
    label="所在楼层"
    :prop="'project.' + index + '.floor'"
    :rules="[{required: true, message: '请填写所在楼层', trigger: 'blur'},
      {pattern: /^([1-9][0-9]{0,2})$/,message:'只能输入正整数，且不超过三位数',trigger:'change'}]">
      <div>
        <el-input
          v-model.number="item.floor"
          placeholder="请填写楼层，3位数以内"
          autocomplete="off">
            <el-button  slot="append">层</el-button>
        </el-input>
      </div>
  </el-form-item>
</div>
</div>

第二种情况 统一验证

我在实际项目开发中遇到的关于ElementUI各种表单验证

有的时候，迫于样式的困扰，我们只能写多个输入框，而不能生成多个 <el-form-item> ,在同一个 <el-form-item> 下统一验证 

<div
  v-for="(item, index) in form.rules"
  :key="index">
  <el-form-item
    :label="index == 0?'添加规则(未到使用时间)':''"
    :prop="'rules.'+index+'.hours'"
    :rules ="{required:true, validator:checkRules , trigger: 'change'}">
    <div>
      <div> 
          <span>使用前 </span>
          <numberInput
           
            size="small"
            v-model="item.hours"
            :isDecimal="false"
            :intlength="4"
            :clearable="false"
            placeholder=""/>
          <span> 小时取消，扣除订单总额 </span>
          <numberInput
           
            size="small"
            v-model="item.percent"
            :isDecimal="false"
            :clearable="false"
            :intlength="3"
            placeholder=""/>
          <span> %费用(不含保证金)</span>
        </div>
    </div>
  </el-form-item>
</div>

rule长这样:

我在实际项目开发中遇到的关于ElementUI各种表单验证 
methods: {
  // 验证rule
  checkRules(rule, value, callback) {
    // 通过rule.field 拿到index ，剩下的都常规操作了 
    let index = rule.field.split('.')[1] - 0;
    if (!this.form.rules[index].hours || !this.form.rules[index].percent) {
      callback(new Error('请填写规则'));
    } else if (Number(this.form.rules[index].percent) > 100) {
      callback(new Error('百分比不能超过100%'));
    } else {
      callback();
    }
  },
}

第七种 动态验证-关联验证

我在实际项目开发中遇到的关于ElementUI各种表单验证

填了租金才会触发对应的租金时间段验证

<div
v-for="(item, index) in form.payment.rent_period"
:key="'rent' + index"
>
  <el-form-item
    :label="'租金'+(index+1)"
   
    :prop="'payment.rent_period.'+index+'.rent_fee'"
    :rules ="{validator:moneyValidator, trigger:'change'}"
>
  </el-form-item>
  <el-form-item
   
    label="租金时间段"
    :prop="'payment.rent_period.'+index+'.start_time'"
    // 就是这里判断一下item.rent_fee是否存在
    :rules="item.rent_fee?{required: true, message:'请填写租金时间段', trigger: 'change'}:{}">
  </el-form-item>
</div>

第八种 动态验证-判重

我在实际项目开发中遇到的关于ElementUI各种表单验证 

<el-form-item
    v-for="(item,index) in industryForm.follow"
    :key="item.id"
    :label="'关注行业'+(index+1)"
    :prop="'follow.'+index+'.industry'"
    :rules="{validator: attentionIndustryValidator, trigger:'change'}"
    >
    ....
</el-form-item>

attentionIndustryValidator(rule, val, callback) {
  let num = 0;
  this.industryForm.follow.forEach(item => {
  // 这里做一次数组判重
    if (this.equals(val, item.industry)) {
      num++;
    }
  });
  if (num >= 2) {
    callback(new Error('请勿重复选择相同的行业!'));
  } else {
    callback();
  }
},

第九种 清除某一个输入项验证

我在实际项目开发中遇到的关于ElementUI各种表单验证

如图开始选择了意向类型为 按面积 ，此时已经验证了意向面积的值，并提示错误信息，然后切换为 按工位 ,如果不清除意向面积的验证，则 错误信息会一直存在 。 

<el-form-item
  ref="areaForm"
  prop="intention_area"
  :label="form.intention_type==1?'意向面积':'意向工位'"
  :label-width="formLabelWidth"
  :rules="[{required:true, validator: areaValidator, trigger:'blur'}]">
...
</el-form-item>

watch: {
  'form.intention_type': {
    handler() {
      this.$refs['areaForm'].clearValidate();
    }
  }
},

最后

我们自定义验证（validator），有两种方式。

  • 第一种 定义在data中
data() {
  let testrule1 = (rule,val,callback) => {};
  return {}
}

使用方式是在 data 中的 rule 里引入： 

data(){
  let testRule1 = (rule,val,callback) => {};
  return {
    rules: {
      name:{required: true, validator:testRule1, trigger:'blur'}
    }
  }
}
  • 第二种 定义在methods中
methods: {
  testRule2(rule, val, callback) {}
}

使用方式是在 <el-form-item> 中引入: 

<el-form-item
  prop="name"
  :rules="{required:true, validator: testRule2, trigger:'blur'}">
    ...
</el-form-item>

以上所述就是小编给大家介绍的《我在实际项目开发中遇到的关于ElementUI各种表单验证》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
C语言常用算法分析

C语言常用算法分析

明日科技 / 2012-1 / 39.80元

《C语言学习路线图•C语言常用算法分析》共分为4篇，第1篇为算法基础篇，包括程序之魂——算法、数据结构基础、查找与排序算法、基本算法思想等内容；第2篇为常用算法篇，包括数学算法、矩阵与数组问题、经典算法等内容；第3篇为趣味算法篇，包括数学趣题、逻辑推理题等内容；第4篇为算法竞技篇，包括计算机等级考试算法实例、程序员考试算法实例、信息学奥赛算法实例等内容。 《C语言学习路线图•C语言常用算法分......一起来看看 《C语言常用算法分析》 这本书的介绍吧!

码农工具
图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3