el-form 单独校验通过v-for 生成内容的item项

添加给此项单独添加rules

        :rules="{

          required: true,  trigger: 'blur',validator: validateJsonItem

        }"

对应的校验方法

 

    validateJsonItem(rule, value, callback){

      if(this.objCons.length>0){

        callback()

      }else{

        callback(new Error('请添加JSON参数'))

      }

    },

此时提交表单,如果v-if 为 true ,就会校验此项。如果提交表单时,此项为空,提示错误信息,添加内容后,错误信息不会消失,需要单独移除此项的校验,可以在点击添加参数时,移除此项的校验

  this.$refs.ruleForm.clearValidate('jsonItem')

最终效果

 

 

 

``` <div v-for="(question, index) in questions" :key="index"> <!-- 单选框 --> <el-form-item v-if="question.question_type === 1" :label="question.question_text" :prop="`${question.question_code}`" :rules="[ { required: true, message: '请选择', trigger: 'change'} ]"> <el-radio-group v-model="formData[question.question_code]" :disabled='isUpdate'> <el-radio v-for="option in question.options" :key="option.option_code" :value="option.option_code">{{ option.option_text }}</el-radio> </el-radio-group> </el-form-item> <!-- 复选框 --> <el-form-item v-else-if="question.question_type === 2" :label="question.question_text" :prop="`${question.question_code}`" :rules="[ { type: 'array', required: true, message: '请至少选择一', trigger: 'change'} ]"> <el-checkbox-group v-model="formData[question.question_code]" :disabled='isUpdate'> <el-checkbox v-for="option in question.options" :key="option.option_code" :value="option.option_code">{{ option.option_text }}</el-checkbox> </el-checkbox-group> </el-form-item> </div> <el-form ref="formRef" :model="info" :rules="rules" label-width="80px" @submit.prevent=""> <el-row :gutter="16"> <el-col :span="6"> <el-form-item label="姓名" prop="name"> <el-input clearable v-model="info.name" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="性别" prop="gender"> <el-input clearable v-model="info.gender" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="年龄" prop="age"> <el-input clearable v-model="info.age" :disabled='isUpdate' /> </el-form-item> </el-col> </el-row> <el-row :gutter="16"> <el-col :span="10"> <el-form-item label="身份证号" prop="id_no"> <el-input clearable maxlength="18" v-model="info.id_no" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="联系方式" prop="phone_no"> <el-input clearable maxlength="11" v-model="info.phone_no" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="调查方式" prop="visit_type"> <el-radio-group v-model="info.visit_type" :disabled='isUpdate'> <el-radio value="自助" label="自助" /> <el-radio value="电话" label="电话" /> <el-radio value="微信" label="微信" /> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form>```如何实现formRef与formRefs校验全部通过才可提交
03-08
为了确保`formRef`与表单内的所有嵌套组件(例如循环生成的问题部分)都能在校验成功的情况下才能提交,可以按照以下步骤操作: 1. **获取所有的需要校验的元素引用**:首先你需要给每一个内部形式(form)或者是需要单独验证的部分设置ref属性,并将其存储起来。对于你提供的例子来说,每个`el-form-item`如果涉及到动态加载的内容(如v-for渲染出的问卷题目),都应有一个唯一的标识作为它的ref。 2. **创建统一触发校验的方法**:编写一个函数,在这个函数里遍历之前保存的所有ref,依次调用它们各自的validate()方法来进行数据合法性检查。同时收集各个验证的结果以便后续处理。 3. **依据总结果判断是否允许提交**:只有当所有子均通过了自身的规则检验后(即返回true),才会继续执行真正的提交动作;如果有任何一个未通过,则阻止提交并提示用户修正错误信息。 基于上述思路给出一段具体的代码示例: ```javascript // 假设这是你的Vue实例中的methods选的一部分 submitForm () { // 获取当前页面上所有要参与联查的对象列表 const forms = this.$refs; let validCount = 0; // 记录已成功完成校验的数量 for (let key in forms){ if(forms[key].$options._componentTag === "ElForm"){ // 确认是不是Element UI 的 ElForm 组件 forms[key].validate((valid)=>{ if(valid){ console.log(`${key} validation passed`); ++validCount; // 如果所有注册过的表单都已经完成了有效的校验 if(Object.keys(forms).length == validCount){ alert("All validations have been successfully verified! Now submitting..."); // 这里放真正提交的动作... } } else{ console.error(`Validation failed at ${key}`); } // 防止异步回调导致计数异常增加的情况发生 return false; }); } } } ``` 请注意,上面的例子是一个简化版本的实际应用可能会更复杂一些,特别是考虑到可能存在异步问题以及并发控制等场景。另外也需要注意的是,在实际目中应该避免直接硬编码UI框架的具体标签名(如这里的“ElForm”),而是尽量利用抽象层或者配置化的方式来适配不同的环境和依赖变更。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值