ant design of vue,form自定义校验

    技术2022-07-11  106

    <a-form-item label="产品特性" class="am-enter_form_item"> <a-select mode="tags" class="am-enter-select" placeholder="选择或填写2~4个标签(限制2~4个字)" showArrow :max-tag-count="4" :max-tag-text-length="4" v-decorator="['productFeature', { rules: [{ required: true, message: '请输入产品特性'},{validator: selectTagChange}] }]" > <a-select-option value="额度高">额度高</a-select-option> <a-select-option value="利率低">利率低</a-select-option> <a-select-option value="期限长">期限长</a-select-option> <a-select-option value="放款快">放款快</a-select-option> <a-select-option value="极速审批">极速审批</a-select-option> </a-select> </a-form-item>

    在methods中写

    selectTagChange: function (rule, value, callback) { var status = true if (!value) {//特别注意在为空时校验规则已写,所以这儿照样callback(),不然不会执行空时的校验 callback() } else { if (value.length <= 4 && value.length >= 2) { value.map(function (item) { if (item.length > 4 || item.length < 2) { status = false return } }) if (!status) { callback('选择或填写2~4个标签(限制2~4个字)') } else { callback() } } else { callback('选择或填写2~4个标签(限制2~4个字)') } } },
    Processed: 0.014, SQL: 9