vueantdform表单校验⽅式总结
1. FormModel
  1.1 prop 直接写在formItem中
  <a-form-model :rules="rules">
    <a-form-model-item prop="xxx"> </a-form-model-item>
  </a-form-model>
  data() {
    return {
      rules: {
        xxx: [ { required: true, message: 'Please input Activity name', trigger: 'blur' }, { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }, ]
      }
    }
  }
  1.2 prop 直接写在formItem中，校验是额外逻辑, 这种⽅式可以根据页⾯内的其他变量进⾏检验逻辑的设置
  <a-form-model :rules="rules">
    <a-form-model-item prop="xxx"> </a-form-model-item>
  </a-form-model>antdesignvue 表格合计
  data() {
    return {
      rules: {
        xxx: [
          { validator: this.checkOp, trigger: 'change' },
          { required: true, message: '请填写' }
        ]
      }
    }
  }，
  methods: {
  checkOp(rule, value, callback) {
  if (!value && this.isOperationType) {
  return callback(new Error('请填写'))
  } else {
  return true
  }
  },
  }
  1.3 直接在form表单添加校验规则，根据页⾯内其他操作变化的变量进⾏控制，当前表单项是否需要校验
  <a-form-model-item label="XXX"
:rules="{
required: 其他变量值,
message: '必填'
}"
  ></a-form-model-item>
  1.4 直接写在form表单上，通过help与validateStatus同时控制
  <a-form-model-item label="XXX"
            　:bind={...fileValidator}
  ></a-form-model-item>
data() {
return {
fileValidator: {
help: '', // 通过help进⾏错误提⽰      validateStatus: 'error'
}}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。