docs: 增加自定义校验的例子

This commit is contained in:
gaoyunqi
2024-08-21 17:15:52 +08:00
parent 900e05586a
commit 999926e620
2 changed files with 61 additions and 0 deletions

View File

@ -15,6 +15,25 @@
### 为什么表单所有字段都成了必填 ### 为什么表单所有字段都成了必填
默认情况下,绑定流程后,新建节点的所有字段都被设置为必填,需要在流程的开始节点-表单设置中去掉非必填的项。 默认情况下,绑定流程后,新建节点的所有字段都被设置为必填,需要在流程的开始节点-表单设置中去掉非必填的项。
### 如何在提交时也提交隐藏字段的值
修改Form.vue里的validate方法将最后的values改为
```javascript
async function validate() {
let values = [];
try {
values = await systemFormRef.value?.validate();
// 省略的代码
} finally {
}
return systemFormRef.value?.getFieldsValue();
}
```
原理是validate方法在校验的同时会返回**校验成功**字段的值对于隐藏字段因为跳过了校验所以值也不会返回。而getFieldsValue方法会返回整个formModel。
### 为什么我的页面绑定流程后也没有相关按钮
- 如果是可以重做,需要用**代码模版**(界面优先和数据优先都可以),而不是代码生成。
- 需要排查菜单接口有没有返回流程定义ID即system/menu/tree接口对应菜单项里必须有schemaId这项
### 表单设计和代码模版有什么区别 ### 表单设计和代码模版有什么区别
代码模版生成的本地文件有二开支持表单符合UI规范表单设计可以在线发布像低开一样不用写代码但是界面不符合UI规范。 代码模版生成的本地文件有二开支持表单符合UI规范表单设计可以在线发布像低开一样不用写代码但是界面不符合UI规范。

View File

@ -0,0 +1,42 @@
## 如何实现表单自定义校验
下面的例子介绍如何为字段增加自定义校验校验的条件是两个文本框内的数字之和必须大于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'
}]
}
```