在使用el-form进行表单校验的时候,往往会遇到这样一个问题:使用el-tabs进行切换,内外部链接,只能选择其一,往往会对其输入的链接内容进行校验,在form-item上面绑定固定的prop,达不到预期的效果;
以下是我在开发中,使用的一种方法,仅供参考;
<el-form-item label="选择链接方式" :prop="link">
<el-tabs
type="border-card"
v-model="activeLink"
@tab-click="handelClick"
>
<el-tab-pane label="内部链接" name="内部链接">
<el-input
v-if="activeLink == '内部链接'"
v-model.trim="CurObject.conLink"
placeholder="请输入内部链接,须带有http或https前缀"
clearable
/>
<div style="font-size: 12px;line-height: 20px;padding: 10px;color: grey;">注:内部链接是用户点击图片跳转后的文章URL。请复制平台用户端访问文章URL到上面输入框中。</div>
</el-tab-pane>
<el-tab-pane label="外部链接" name="外部链接">
<el-input
v-if="activeLink == '外部链接'"
v-model.trim="CurObject.wrapLink"
placeholder="请输入外部链接,须带有http或https前缀"
clearable
/>
<div style="font-size: 12px;line-height: 20px;padding: 10px;color: grey;">注:外部链接是用户点击图片后跳转外网某个文章的URL。</div>
</el-tab-pane>
</el-tabs>
</el-form-item>
可以看到,内外链接分别对应不同的字段,而用与校验的link,则是在切换tabs的时,进行动态的改变
handelClick(tab) {
this.$refs.ruleForm.clearValidate(this.link)
this.activeLink = tab.name
if (this.activeLink == '内部链接') {
this.link = 'conLink'
} else {
this.link = 'wrapLink'
}
},
切换前,进行置空,避免切换到另一方时,上次的校验仍存在;
校验部分的代码,如下
rules: {
conLink: [{ required: true, validator: validateLink, trigger: 'blur' }],
wrapLink: [
{ required: true, validator: validateLink, trigger: 'blur' },
],
},
const validateLink = (rule, value, callback) => {
if (value == undefined) {
callback(new Error('请输入链接'))
}
let httpReg = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/
if (value !== '') {
if (!httpReg.test(value)) {
callback(new Error('链接不正确,请以http或https开始'))
} else {
callback()
}
} else {
callback(new Error('请输入链接'))
}
}
往往在进行新增或编辑数据的时候,涉及到初始化的过程;初始化的过程中,如果,没有对数据进行重新赋值,会在页面操作中,出现难以预估的bug;
我在初始化的时候,遇到这样一个问题:当我选择内部链接,明明已经在对应的el-input中输入内容了,打印也能打印出来,页面上面就是不会更新,当切换到外部链接,再切回来的时候,数据更新了;百度尝试,使用forceUpdate仍没有解决问题;
后来询问同事,才发现自己忽略了$set这样一个点;
因为我们在新增form表单,为了避免未输入对应的字段,(form绑定的CurObject:{});调用接口的时候,传过去的值为undefined的问题,往往会在CurObject写好form-item绑定的字段;这样的话,我们在编辑的时候,记得使用$set更新对应的字段,避免页面与内存数据不一致的问题的出现
initData(val) {
this.CurObject = {}
if (val.id) {
for (let key in val) {
this.$set(this.CurObject, key, val[key])
}
delete this.CurObject.order
delete this.CurObject.link
delete this.CurObject.publishTime
if (val.linkType) {
this.activeLink = val.linkType
this.link = this.activeLink == '内部链接' ? 'conLink' : 'wrapLink'
//直接赋值,输入不进去内容,切换回来才有,加监听事件也不起效,$set
if (val.linkType == '内部链接') {
this.$set(this.CurObject, 'conLink', val.link)
} else if (val.linkType == '外部链接') {
this.$set(this.CurObject, 'wrapLink', val.link)
}
}
if (val.coverImage && val.coverImage !== 'undefined') {
this.bannerfileList.push({ url: val.coverImage })
}
} else {
this.CurObject = {
title: '',
coverImage: '',
linkType: '内部链接',
conLink: '',
wrapLink: '',
}
}