1.复杂表单中checkbox的回显问题-使用valuePropName
参考官网部分:
2.动态表单自定义校验【函数校验】
参考官网部分:
<!-- 仅作思路示例 -->
<a-form-item label="数字范围不包含">
<a-input
type="small"
placeholder="请输入不包含的数字,最多10项,以英文逗号作为分隔符"
:maxLength="200"
v-decorator="['range',
{rules: [
{ validator: (rule, value, callback) => { validatorRange(rule, value, callback) } }
]
}]"
/>
</a-form-item>
<!-- 动态表单中 v-for item为当前表单对象 此处校验规则为动态校验输入的最大值不得小于最小值 -->
<a-form-item label="最大值">
<a-input
type="small"
placeholder="请输入数字"
:maxLength="20"
v-decorator="['rangeMax',
{rules: [
{ validator: (rule, value, callback, item) => { validatorRangeMax(rule, value, callback, item) } }
]
}]"
/>
</a-form-item>
<a-form-item label="最小值">
<a-input
type="small"
placeholder="请输入数字"
:maxLength="20"
v-decorator="['rangeMin',
{rules: [
{ validator: (rule, value, callback, item) => { validatorRangeMin(rule, value, callback, item) } }
]
}]"
/>
</a-form-item>
<script>
export default {
data () {
return {
id: ''
}
},
methods: {
validatorRange (rule, value, callback) {
// 校验当前输入框内容长度
const newArr = value.split(',')
const tip = '最多输入10项内容!'
if (newArr.length > 10){
callback(tip)
} else {
callback()
}
},
validatorRangeMax (rule, value, callback, item) {
// 使用正则表达式校验当前输入框内容为数字
const tipNum = '数字格式不正确!'
if (!/^[0-9]*$/.test(value)) {
callback(tipNum)
}
const min = item.getFieldValue('rangeMin')
const tip = "最大值不得小于最小值!"
// 判断条件: 1.获取的min值存在 2.当前输入的value值存在 3.input输入的内容为string类型,比较min和value的大小时转换为number类型进行比较
if (!!min && !!value && (Number(min) > Number(value))) {
callback(tip)
} else {
callback()
}
},
validatorRangeMin (rule, value, callback, item) {
// 使用正则表达式校验当前输入框内容为数字
const tipNum = '数字格式不正确!'
if (!/^[0-9]*$/.test(value)) {
callback(tipNum)
}
const max = item.getFieldValue('rangeMax')
const tip = "最大值不得小于最小值!"
// 判断条件: 1.获取的max值存在 2.当前输入的value值存在 3.input输入的内容为string类型,比较min和value的大小时转换为number类型进行比较
if (!!min && !!value && (Number(max) < Number(value))) {
callback(tip)
} else {
callback()
}
},
}
</script>