43 lines
1.6 KiB
Markdown
43 lines
1.6 KiB
Markdown
## 如何实现表单自定义校验
|
||
|
||
下面的例子介绍如何为字段增加自定义校验，校验的条件是两个文本框内的数字之和必须大于100。任何多字段的校验都可以参照此进行，日期时间可以借助dayjs库比较。
|
||
|
||
首先，在config.ts里加入设置表单用的函数，以便我们在自定义校验中可以拿到全部表单的值。
|
||
```javascript
|
||
let formRef = null;
|
||
export function setFormRef(ref) {
|
||
formRef = ref;
|
||
}
|
||
```
|
||
然后再Form.vue中，将表单的引用传到config.ts里
|
||
```javascript
|
||
// setFormRef要引入进来
|
||
import { formProps, formEventConfigs, setFormRef } from './config';
|
||
|
||
const systemFormRef = ref();
|
||
setFormRef(systemFormRef); //新加的
|
||
```
|
||
|
||
最后就可以编写校验规则的代码，找到需要触发校验的字段，在rules里增加自定义规则。
|
||
|
||
validator可以是异步函数，因此通过接口验证也可以。默认参数为_rule: Rule, value: string，如果是单值校验可以不引入表单引用，直接在校验器拿值。
|
||
```javascript
|
||
{
|
||
rules: [{
|
||
validator: async function() {
|
||
const formValues = formRef.value.getFieldsValue();
|
||
const val1 = formValues.zhaGe15916;
|
||
const val2 = formValues.zhaGe22645;
|
||
if (!val1 || !val2) {
|
||
return Promise.resolve(); // 这里需要搭配必填校验
|
||
}
|
||
if ((+val1) + (+val2) != 100) {
|
||
return Promise.reject('两数之和必须为100');
|
||
}
|
||
return Promise.resolve();
|
||
},
|
||
trigger: 'blur'
|
||
}]
|
||
}
|
||
```
|