Skip to content

提交表单 ​

AutoForm不同于普通的表单,提供了submit方法用于提交表单。

html
<auto-form id="login"></auto-form>

<script>
    const { configurable } = AutoStoreSpaces;
    const form = document.querySelector('#login');
    form.state = {
        username: configurable('', {
            label: '用户名',
            placeholder: '请输入用户名',
            required: true,
            validate: (value) => {
                return value.length > 5;
            },
            errorMessage: '用户名长度必须大于5',
        }),
        //....
    };

    form.submit((values, errors) => {
        if (errors) {
            console.log('表单校验失败', errors);
        } else {
            // values是一个对象,包含表单所有字段的值
            // 可以自行处理表单数据
            console.log('表单校验成功', values);
        }
    });
</script>
  • submit方法并不像传统的表单提交那样,会刷新页面,而是会触发回调,让开发者自行处理表单数据。
  • values参数是一个对象,包含表单所有字段的值。
  • errors参数是一个对象,包含校验失败的字段和错误信息,如果校验通过则为undefined。