elementUI 表单验证 在trigger blur change 下无法触发验证的情况,怎么自定义事件触发

这个是我在用VueTreeselect 树形下拉框中遇到的表单验证问题,在我的博客中https://blog.csdn.net/qq_42092177/article/details/109224217,可以看VueTreeselect的使用

VueTreeselect中表单验证中trigger和blur 都无法触发验证,后来通过VueTreeselect中有select回调事件,进行在里面触发  element表单方法 this.$refs['officeTree'].clearValidate()单个清除表单验证

<el-form-item label="所属科室:"
                      prop="belongOffice"
                      ref="officeTree">
          <TreeSelect @select="treeSelect"
                      :searchable="false"
                      style="width:220px"
                      v-model="editForm.belongOffice"
                      :options="officeTree"
                      placeholder="请选择科室"></TreeSelect>

 

treeSelect (node, instanceId) {
      this.$refs['officeTree'].clearValidate()
    },
editRules: {
        belongOffice: [{ required: true, message: '请选择所属科室', trigger: 'change' }],
      },

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,关于elementui自定义循环表单验证,您可以参考以下步骤: 1. 在需要验证的表单项中设置ref属性,例如: ``` <el-form ref="myForm"> <el-form-item v-for="(item,index) in formList" :key="index" :label="item.label"> <el-input v-model="item.value" /> </el-form-item> </el-form> ``` 2. 在需要添加验证规则的组件中设置prop属性,例如: ``` <el-form-item v-for="(item,index) in formList" :key="index" :label="item.label"> <el-input v-model="item.value" :placeholder="item.placeholder" :prop="'formList.'+index+'.value'" /> </el-form-item> ``` 其中prop的值被设置成"formList.index.value",这样可以对对应的表单项进行验证。 3. 在data中定义表单数据和验证规则,例如: ``` data() { return { formList: [ { label: '姓名', value: '', placeholder: '请输入姓名' }, { label: '年龄', value: '', placeholder: '请输入年龄' }, { label: '邮箱', value: '', placeholder: '请输入邮箱' } ], rules: { 'formList.0.value': [ { required: true, message: '请输入姓名', trigger: 'blur' } ], 'formList.1.value': [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须是数字值', trigger: 'blur' } ], 'formList.2.value': [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] } ] } } } ``` 在上述代码中,rules中定义了每个表单项对应的验证规则,并通过prop指定了对应的表单值。 4. 在提交表单时触发验证,例如: ``` submitForm() { this.$refs['myForm'].validate(valid => { if (valid) { // 表单验证通过 console.log('表单验证通过!'); } else { // 表单验证失败 console.log('表单验证失败!'); return false; } }); } ``` 在submitForm函数中,通过this.$refs['myForm'].validate()方法触发表单验证,将验证结果返回给回调函数valid。如果valid为true,则表单验证通过,否则表单验证失败。 以上就是elementui自定义循环表单验证的基本流程,您可以根据需求进行调整和优化。希望对您有所帮助!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值