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