今天分享一篇在ElementPlus中使用el-form 动态切换校验规则的实用方法。 一、问题概述 作为前端开发人员,在开发项目中,特别是后台管理系统,表单的使用是必不可少的。当业务需求复杂时,常常需要根据不同的参数动态切换校验规则。 当动态切换校验规则时,可能会出现一些意想不到的状况, ...
在Element UI中,el-form组件的动态校验是一个常见的需求,特别是在需要根据用户输入或选择动态改变表单验证规则的场景中。以下是如何实现el-form动态校验的步骤和示例代码: 1. 理解el-form动态校验的概念和需求 动态校验意味着表单的验证规则不是静态定义的,而是可以根据用户的交互(如选择某个选项、输入特定内容等)动...
这样的话,就可以照顾到每一项中的每一个绑定的值了,校验就不会漏掉 4.校验规则写成内联就可以触发校验函数this.$refs["ruleForm"].validate((val) => {})了 <el-form-item label="姓名" :prop="'formItemArr.' + index + '.name'" :rules="{ required: true, message: '请填写', trigger: '...
那么每个el-form-item的prop和el-input、el-select等的v-model也是动态变量填充, 怎么样才能内嵌rules校验呢? 如下数据结构: // form通过initData数据结构进行渲染constinitData = [ {channel:'sms',title:'短信频控',ref:'smsFormRef',model:'smsFreqObj',icon:'el-icon-message',state:true,lists: [ {ti...
el-form动态表单校验规则包含以下方面: 1.必带三种属性,包括model、ref和label-width。 2.校验是通过调用表单实例上的validate方法来实现的。这种方法是异步的,它会在进行验证时,如果表单项不符合rules中的规则,在对应的表单项下面提示设定的提示信息。 3.Form组件提供了表单验证的功能,只需为rules属性传入约定的验证...
ruleForm.formItemArr.push(itemObj); }, 重点来喽,因为是循环的,所以prop也要变成动态的了,要拼接上index,就变成根据索引去找对应的校验项了,即为::prop="'formItemArr.' + index + '.name'" ,这样的话,就变成了:prop="formItemArr.0.name"、prop="formItemArr.1.name"、prop="formItemArr.2....
rules中的校验该如何校验呢:只能在元素中写上对应的校验,否则无法实现校验 add.png 完整代码实现: <el-formref="taskRef":model="form":rules="rules"label-width="130px"inline><el-form-itemlabel="参与人员"><el-buttontype="primary"class="addbtn"@click="addbtn">添加一条</el-button></el-form...
<el-form-item label="年龄" :prop="userOne.age"> <!-- 用户一的必填项单独配置 --> <el-input v-model="ruleForm.age"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="家乡" :prop="userOne.home"> <!-- 用户一的必填项单独配置 --> <el-...
<el-form:model="dataForm"ref="dataForm"label-width="100px"class="demo-dynamic">//切记切记!!! //:prop="`itemList.${index}.name`" //或者:prop="'itemList.' + index + '.name'" //一定不能写成 :prop="itemList[index].name"<el-rowv-for="(item, index) in dataForm.itemList"...
需求:el-form里面el-form-item的数据基本可以重复,可以遍历生成,el-form-item里面有下拉和input,选择某个下拉出现input,某个下拉隐藏input,如下图: 思路:动态生成el-form-item,并在el-form-item绑定校验规则 <el-form ref="stockForm":model="stockForm"class="zd-el-form"size="mini"inline ...