表单验证

API 提供了一系列强大的表单验证功能，帮助开发者确保用户输入的正确性和完整性。这些方法涵盖了表单整体验证、字段级别验证、规则更新等多方面内容。

数据结构

以下是 Api 表单验证相关的数据结构及简明解释：

interface Api {
  // 更新组件的验证规则，支持合并或替换
  updateValidate(id: string, validate: Object[], merge?: Boolean): Promise<any>;
  updateValidates(validates: { [id: string]: Object[] }, merge?: Boolean): Promise<any>;
  // 刷新表单的验证状态，重新触发验证逻辑
  refreshValidate(): void;
  // 清理指定字段或整个表单的验证状态
  clearValidateState(fields?: string | string[], clearSub?: Boolean): void;
  // 清理指定字段子表单的表单的验证状态
  clearSubValidateState(fields?: string | string[]): void;
  // 验证表单，返回验证结果的 Promise
  validate(callback?: (state: any) => void): Promise<any>;
  // 验证指定字段，返回验证结果的 Promise
  validateField(field: string, callback?: (state: any) => void): Promise<any>;
}

验证表单

validate 方法用于验证整个表单，并在回调中返回验证结果。该方法返回一个 Promise 对象，验证通过则 resolve，否则 reject。

type validate = (callback:(...args:any[]) => void)=> Promise

• 示例：

fApi.validate((valid, fail) => {
  if (valid === true) {
    console.log('表单验证通过');
  } else {
    console.log('表单验证未通过');
  }
}).then(() => {
    //推荐
  console.log('Promise resolved: 表单验证通过');
}).catch(() => {
  console.log('Promise rejected: 表单验证未通过');
});

验证指定字段

validateField 方法用于验证指定字段，并在回调中返回验证结果。该方法返回一个 Promise 对象，验证通过则 resolve，否则 reject。

type validateField = (field, callback:(...args:any[]) => void)=> Promise

• 示例：

fApi.validateField('goods_name', (valid, fail) => {
  if (valid === true) {
    console.log('字段验证通过');
    // todo 字段验证通过后的处理逻辑
  } else {
    console.log('字段验证未通过');
    // todo 字段验证未通过的处理逻辑
  }
}).then(() => {
    //推荐
  console.log('Promise resolved: 字段验证通过');
}).catch(() => {
  console.log('Promise rejected: 字段验证未通过');
});

更新验证规则

updateValidate 方法用于更新指定字段的验证规则。可以选择覆盖更新或合并更新。

interface updateValidate{
    //覆盖更新
    (field:string, validate:Object[]):void
    //合并更新
    (field:string, validate:Object[], merge:true):void
}

• 示例：

// 合并更新 goods_name 字段的验证规则
fApi.updateValidate('goods_name', [{ required: true }], true);
// 覆盖更新 goods_name 字段的验证规则
fApi.updateValidate('goods_name', [{ required: true }]);

updateValidates 方法用于批量更新多个字段的验证规则。可以选择覆盖更新或合并更新。

interface updateValidates{
    //覆盖更新
    (validates:{[field:string]: Object[]}):void
    //合并更新
    (validates:{[field:string]: Object[]}, merge:true):void
}

• 示例：

// 合并更新多个字段的验证规则
fApi.updateValidates({
  'goods_name': [{ required: false }],
  'price': [{ required: true, type: 'number' }]
}, true);
// 覆盖更新多个字段的验证规则
fApi.updateValidates({
  'goods_name': [{ required: true }],
  'price': [{ required: true, type: 'number' }]
});

刷新验证规则

refreshValidate 方法用于手动刷新表单的验证规则。如果修改了验证规则但未生效，可以通过调用此方法来确保规则生效。

type refreshValidate = ()=>void

• 示例：

fApi.refreshValidate();
console.log('验证规则已刷新');

清除表单验证状态

clearValidateState 方法用于清除表单或指定字段的验证状态。

interface clearValidateState {
    ():void
    (field:string, clearSub?:boolean):void
    (field:string[], clearSub?:boolean):void
}

• 示例：

// 清除整个表单的验证状态
fApi.clearValidateState();
// 清除单个字段的验证状态
fApi.clearValidateState('goods_name');
// 清除多个字段的验证状态
fApi.clearValidateState(['goods_name', 'price']);

清除子表单验证状态

clearSubValidateState 方法用于清除 group、object等子表单的验证状态。

interface clearSubValidateState {
    (field:string):void
    (field:string[]):void
}

• 示例：

// 清除单个子表单的验证状态
fApi.clearSubValidateState('goods_name');
// 清除多个子表单的验证状态
fApi.clearSubValidateState(['goods_name', 'price']);

示例

动态更新表单字段的验证规则

在一个注册表单中，用户可以选择不同的注册方式（如电子邮件或电话号码）。根据用户的选择，动态更新相应字段的验证规则。

const registerMethod = fApi.getValue('register_method');
if (registerMethod === 'email') {
    fApi.updateValidate('email', [{ required: true, type: 'email', message: '请输入有效的电子邮件地址' }]);
    fApi.updateValidate('phone', [{ required: false }]);
} else {
    fApi.updateValidate('phone', [{ required: true, pattern: /^\d{10}$/, message: '请输入有效的电话号码' }]);
    fApi.updateValidate('email', [{ required: false }]);
}
fApi.refreshValidate(); // 刷新验证规则以应用变化

批量更新多个字段的验证规则

在一个复杂的表单中，根据用户角色批量更新多个字段的验证规则。例如，管理员需要更多必填字段，而普通用户则只需填写基础信息。

const userRole = fApi.getValue('user_role');
if (userRole === 'admin') {
    fApi.updateValidates({
        'username': [{ required: true }],
        'email': [{ required: true, type: 'email' }],
        'permissions': [{ required: true }]
    });
} else {
    fApi.updateValidates({
        'username': [{ required: true }],
        'email': [{ required: true, type: 'email' }],
        'permissions': [{ required: false }]
    });
}
fApi.refreshValidate(); // 刷新验证规则以应用变化

清理表单验证状态

在一个编辑表单中，用户提交表单后，如果想要继续编辑，需要清理所有字段的验证状态，以便重新验证。

fApi.submit().then(() => {
    console.log('表单提交成功');
    fApi.clearValidateState(); // 提交成功后清理验证状态
});

在表单提交前重新触发验证逻辑

在一个多条件表单中，用户可能会修改部分已验证的字段。在提交前，需要重新触发验证逻辑以确保所有数据都符合最新的验证规则。

fApi.validate().then((state) => {
    if (state.valid) {
        fApi.submit();
    } else {
        console.error('表单验证未通过');
    }
});