Element-ui中自定义表单校验规则
先看一个场景图:
给一个标签el-tag添加表单的校验,且在内容有了以后关闭校验
看代码:
<el-form-item class="baseinfo-tags" label="服务包标签:" prop="tags"> <el-tag class="tag" :key="tag" v-for="tag in baseInfo.tags" closable :disable-transitions="false" @close="handleClose(tag)"> {{tag}} </el-tag> <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"> </el-input> <el-button v-else class="button-new-tag" :disabled="baseInfo.tags.length == 3" size="mini" @click="showInput">+ 新建标签</el-button> <span class="tag-num">{{baseInfo.tags.length}}/3个</span> </el-form-item>
为表单添加校验
baseInfoRules: { tags: [ { trype: 'array', validator: validateTags, required: true, message: '请选择至少一个标签', trigger: 'change' } ], }, // 表单正则
添加自定义正则:
随后需要在标签有了以后将校验关闭:
// 新增标签 确认 handleInputConfirm() { // xxx的操作 this.$refs.baseInfoForm.validateField('tags'); // 再次校验tag的正则 },
随后在点击提交的时候进行正则判断。在tag改变的时候进行该正则的关闭
作者:狗尾草
-------------------------------------------
个性签名:海到无边天作岸,山登绝顶人为峰!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!