1. 程式人生 > 其它 >vue antd form表單校驗方式總結

vue antd form表單校驗方式總結

1.FormModel

  1.1 prop 直接寫在formItem中

  <a-form-model :rules="rules">

    <a-form-model-itemprop="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-itemprop="xxx"></a-form-model-item>

  </a-form-model>

  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="PC端CdnUrl"
:rules="{
required: 其他變數值,
message: '必填'
}"
  ></a-form-model-item>
  1.4直接寫在form表單上,通過helpo