element ui表单必填_vue elementui rules根据选择条件判断下一个选项必填和非必填的校验...

效果图如下

选择H5 link,HyperLink为必填项

选择non-clickable,HyperLink为非必填项

代码如下：

v-for="item in typeOptions"

:key="item.value"

:label="item.label"

:value="item.value">

formRule: {

title: [

{ required: true, message: 'Please enter Banner title', trigger: 'blur' },

{ min: 1, max: 50, message: '1 to 50 characters', trigger: 'blur' }

],

img: [

{ required: true, message: 'Please select a cover image', trigger: 'change' }

],

type: [

{ required: true, message: 'Please select a jump type', trigger: 'change' }

],

target:[

{ required: true, message: 'Please write a content', trigger: 'blur' }

]

},

formRule是表单绑定的rules字段

在需要判断是否非必填项上绑定rules属性来判断是否需要必填，如下图