:::danger 自定义校验从 RenderEngine 5.3.0 版本开始支持 :::

  1. function validateRule(value) {
  2.   if (value > 20) {
  3.       return true;
  4.   }
  5.   return false;
  6. }

value: 当前表单的值。

  1. function validateRule(value, state, ctx) {
  2.   const preVal = ctx.store.get('fieldId').getVal();
  3.   if (preVal > value) {
  4.       return true;
  5.   }
  6.   return false;
  7. }

value: 当前表单的值。

state: 当前表单的 state。

ctx: 渲染引擎上下文

返回值 必须是 true or false。

多错误输出校验

多错误输出校验需要使用 state.invokeValidate 这个 API.

  1. function validateRule(value, state, ctx) {
  2.   const preVal = ctx.store.get('fieldIdPre').getVal();
  3.   if (preVal > value) {
  4.       state.invokeValidate(false, '错误信息1');
  5.     return false;
  6.   }
  7.   const nextVal = ctx.store.get('fieldIdNext').getVal();
  8.    if (nextVal > value) {
  9.       state.invokeValidate(false, '错误信息2');
  10.     return false;
  11.   }
  12.   return true;
  13. }

自定义异步校验

自定义异步校验需要使用 state.invokeValidate 这个 API.

  1. function validateRule(value, state, ctx) {
  2.   const preVal = ctx.store.get('fieldId').getVal();
  3.   ctx.dp.fetch({
  4.     url: 'url',
  5.     data: { value },
  6.   }).then((content) => {
  7.     if (content.result) {
  8.       state.invokeValidate(true, '');
  9.     } else {
  10.       state.invokeValidate(false, '错误信息');
  11.     }
  12.   });
  13.   return true;
  14. }

注意：由于校验是异步的，当你使用 form.getData() 时拿到的验证结果是不准确的，当你有异步校验时，需要在调用 form.getData() 前先执行下你的异步校验，通过后再调用 form.getData()。

具体实现，可将异步校验封装成一个通用的 action

  1. export function validateAsync(ctx) {
  2.   return new Promise((resolve, reject) => {
  3.     ctx.dp.fetch({
  4.       url: 'url',
  5.       data: { value },
  6.     }).then((content) => {
  7.       if (content.result) {
  8.         resolve(content)
  9.       } else {
  10.         reject(content)
  11.       }
  12.     });
  13.   });
  14. }

在自定义校验回调和提交数据时分别调用

  1. function validateRule(value, state, ctx) { // 自定义校验回调
  2.   const preVal = ctx.store.get('fieldId').getVal();
  3.   ctx.execAction('validateAsync').then((content) => {
  4.     if (content.result) {
  5.       state.invokeValidate(true, '');
  6.     } else {
  7.       state.invokeValidate(false, '错误信息');
  8.     }
  9.   });
  10.   return true;
  11. }
  1. function formSubmit(value, state, ctx) { // 提交数据
  2.   const preVal = ctx.store.get('fieldId').getVal();
  3.   ctx.execAction('validateAsync').then((content) => {
  4.     if (content.result) {
  5.       cosnt data = ctx.store.getForm().getData();
  6.       if (data.success) {
  7.         // 提交数据到后台
  8.       }
  9.     } else {
  10.       state.invokeValidate(false, '错误信息');
  11.     }
  12.   });
  13. }