Fusion design from表单校验

洪胤

2023-12-01

Fusion design from表单校验

最近项目中使用了fusion design,后台管理系统中最常用的就是table和form表单,众所周知，form表单的主要作用就是数据的获取，校验和设置，关于fusion中的form表单，先对校验做一下总结，方便日后项目中快速使用。

常见的基础校验方式

一：required:fromItem必填校验，可以用requiredMessage改变必填校验错误信息，如果不填写，则默认展示XX项为必填项。可以使用asterisk确认星号是否需要。

二：min/max :对数字，金额等表单的最大值/最小值的校验,(主要是涉及到数字的地方，对字段数值大小的校验)。minmaxMessage：min和max的自定义错误信息，minmaxTrigger：minmax校验什么时候触发，默认是onchange。

三：maxLength/minlength:对表单输入值的长度校验。/数组的长度校验minmaxLengthMessage：对上述校验的错误信息。
minmaxTrigger：上述校验何时触发
**四：length：字符串精确长度、数组精确长度校验 lengthMessage lengthTrigger 同上述。
**
五：pattern正则校验

pattern={/正则表单式/} // 默认的错误提示信息是字段值不符合该正则表达式，很显然 这是不能使用的

patternMessage pattern 自定义错误信息多采用这个，当然fusion 为我们封装了几个常见的正则
patternTrigger pattern 校验何时触发，默认值 onChange, 原生事件均可使用 onChange/onBlur/onFocus/…

**六：format：四种常用的 pattern ：‘number’, ‘email’, ‘url’, ‘tel’。 formatMessage：错误信息。
**

通常所说，上述的校验满足的场景是比较单一的，项目中使用的校验远远复杂于上述，所以自定义校验规则显的非常重要。

七：validator 自定义校验函数 validatorTrigger： validator 校验何时触发，默认值 onChange, 原生事件均可使用 onChange/onBlur/onFocus/…

异步校验的写法 我之前一般采用这种写法 现在通常采用同步的写法 
  userExists(rule, value) {
    return new Promise((resolve, reject) => {
      if (!value) {
        resolve();
      } else {
        setTimeout(() => {
          if (value === "frank") {
            reject([new Error("Sorry, this username is already exist.")]);
          } else {
            resolve();
          }
        }, 500);
      }
    });
  }
同步的写法
 checkPass2(rule, value, callback) {
    const { getValue } = this.field;
    if (value && value !== getValue("passwd")) {
      return callback("Inconsistent password input twice!");
    } else {
      return callback();
    }
  }

Fusion design from表单校验