vue antd form表單校驗方式總結
阿新 • • 發佈:2021-11-19
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