ant design of vue,form自定义校验
<a-form-item label="产品特性" class="am-enter_form_item"><a-select mode="tags"class="am-enter-select"placeholder="选择或填写2~4个标签(限制2~4个字)"showArrow
·
<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个字)')
}
}
},
更多推荐
已为社区贡献2条内容
所有评论(0)