Bootstrap

复杂表单中checkbox的回显问题-使用valuePropName&动态表单自定义校验【函数校验】

1.复杂表单中checkbox的回显问题-使用valuePropName

参考官网部分:

Ant Design VueAn enterprise-class UI components based on Ant Design and Vueicon-default.png?t=N7T8https://1x.antdv.com/components/form-cn/

2.动态表单自定义校验【函数校验】

参考官网部分:

Ant Design VueAn enterprise-class UI components based on Ant Design and Vueicon-default.png?t=N7T8https://1x.antdv.com/components/form-cn/#components-form-demo-customized-validation

<!-- 仅作思路示例 -->
<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>
;