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>
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'
}}
}