vue elementui rules根据选择条件判断下一个选项必填和非必填的校验

效果图以下javascript

选择H5 link,HyperLink为必填项html

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

代码以下:ui

<el-row>
              <el-col :span="10" :offset="1">
                  <el-form-item label="Content Type" prop="type">
                      <el-select v-model="formInfo.type" placeholder="select" size="small" @change="handleChange">
                        <el-option
                          v-for="item in typeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :offset="1" v-show="formInfo.type === 1">
                  <el-form-item label="HyperLink" prop="target" :rules="formInfo.type === 1?formRule.target:[{ required: false}]">
                      <el-input class="form-input" v-model="formInfo.target" clearable size="small" placeholder="Please select related content" @focus="selectArticle"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="10" :offset="1" v-show="formInfo.type === 0">
                <el-form-item label="HyperLink" prop="target" :rules="formInfo.type === 0 ?formRule.target:[{ required: false}]">
                    <el-input class="form-input" v-model="formInfo.target" maxlength="40" clearable size="small" placeholder="Contextual Buying Approach"></el-input>
                </el-form-item>
            </el-col>
            </el-row>
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字段spa

在须要判断是否非必填项上绑定rules属性来判断是否须要必填,以下图3d

相关文章
相关标签/搜索