校验

AutoForm提供了丰富的字段校验功能。

校验函数

通过configurable函数的onValidate参数指定校验函数。

const store = new AutoStore({
    user: {
        username: configurable('NAME', {
            label: '用户名',
            onValidate: (value) => {
                return value.length > 6;
            },
        }),
        password: configurable('PASSWORD', {
            label: '密码',
        }),
    },
});

onValidate函数返回true表示校验通过，返回false表示校验失败。
onValidate在状态变化时触发执行，比如store.state.username='xxx'时，会触发onValidate的执行。

错误信息

当校验出错时，可以通过以下方式提供错误信息：

invalidTips:

类型: string | ((e: Error, path: string, newValue: Value, oldValue: Value) => string)

指定校验失败时的错误信息。

const store = new AutoStore({
    user: {
        name: configurable('NAME', {
            label: '用户名',
            onValidate: (value) => {
                return value.length > 6;
            },
            invalidTips: '用户名长度必须大于6',
        },
        password: configurable('PASSWORD', {
            label: '密码',
            onValidate: (value) => {
                return value.length > 6;
            },
            invalidTips: (e, path, newValue, oldValue) => {
                return `密码长度不满足要求：` + e.message;
            }
        }),
    },
});

从onValidate触发的错误中提取

如果没有指定invalidTips，则也可以从onValidate触发的错误中提取。

const store = new AutoStore({
    user: {
        name: configurable('NAME', {
            label: '用户名',
            onValidate: (value) => {
                if(value.length <= 6){
                    throw new Error('用户名称必须大于等于6')
                }
            }
        }
    }
});

如果同时提供onValidate和invalidTips，则优先使用invalidTips，当invalidTips为函数时，会将的错误对象作为参数传递给invalidTips。
错误信息还支持插值变量，所有配置参数均可以作为插值变量，比如：

const store = new AutoStore({
    user: {
        name: configurable('NAME', {
            label: '用户名',
            onValidate: (value) => {
                return value.length >= 6
            },
            invalidTips: '{label}长度必须大于6'
        }
    }
})

校验失败行为

当执行onValidate时，如果校验失败，会抛出Error对象，可以通过onFail参数指定校验失败时的行为。

类型： 'pass' | 'throw' | 'ignore' | 'throw-pass'

pass
对写入操作放行，不抛出错误，错误的值也写入到state中。
throw
校验失败时，抛出错误，不更新state。
ignore
忽略错误，不更新state。
throw-pass 对写入操作放行，错误的值也写入到state中,但同时也抛出错误。

const store = new AutoStore({
    a: configurable('12345', {
        label: '用户名',
        onValidate: (value) => value.length >= 6,
        invalidTips: '用户名长度必须大于等于6',
        onFail: 'pass',
    }),
    b: configurable('12345', {
        label: '用户名',
        onValidate: (value) => value.length >= 6,
        invalidTips: '用户名长度必须大于等于6',
        onFail: 'throw',
    }),
    c: configurable('12345', {
        label: '用户名',
        onValidate: (value) => value.length >= 6,
        invalidTips: '用户名长度必须大于等于6',
        onFail: 'ignore',
    }),
    d: configurable('12345', {
        label: '用户名',
        onValidate: (value) => value.length >= 6,
        invalidTips: '用户名长度必须大于等于6',
        onFail: 'throw-pass',
    }),
});

校验事件

当执行onValidate时，无论校验失败或失败，均会抛出validate事件.

'validate': { path: string[], newValue: any, oldValue: any, error: string | undefined }
const store = new AutoStore({
    user: {
        name: configurable('NAME', {
            label: '用户名',
            onValidate: (value) => {
                return value.length >= 6
            }
        })
})

store.on('validate', ({
    path: string[],                 // 状态路径
    newValue: any,
    oldValue: any,
    error: string | undefined       // 校验错误对象
}) => {

})

校验时机

AutoForm通过validAt参数配置校验时机为：

input: 输入时
lost-focus: 丢失焦点时

<auto-form validAt="input"></auto-form>
// 默认
<auto-form validAt="lost-focus"></auto-form>

初始化校验

AutoForm通过validAtInit参数用于配置是否在首次渲染时进行校验并显示校验错误。

<auto-form validAtInit></auto-form>

校验状态

通过表单元素对象的invalid属性获取当前表单是否无效。

html

<auto-form id="xx"></auto-form>
<script>
    const form = document.getElementById('#xx');
    console.log(form.invalid); // true/false
</script>

当表单校验失败时，表单自动添加invalid类名。

校验 ​

校验函数 ​

错误信息 ​

校验失败行为 ​

校验事件 ​

校验时机 ​

初始化校验 ​

校验状态 ​