FormGroup ​

<template>
<Form @submit="onSubmit">
  <FormGroup required>
    <Label>用户名</Label>
    <TextInput name="username"/>
  </FormGroup>
  <button type="submit">提交</button>
</Form>
</template>

<script setup>
import { Form, FormGroup, Label, TextInput, Violation } from '@tomoeed/j-form';

function onSubmit(value) {
    console.log('Do something.');
}
</script>

<template>
<Form>
  <FormGroup required>
    <template #valid-feedback>用户名可以使用</template>
    <template #invalid-feedback="{ contain, containAny }">
      <span v-if="contain(Violation.VALUE_MISSING)">用户名不能为空</span>
      <span v-else-if="containAny(Violation.TOO_LONG, Violation.TOO_SHORT)">用户名长度应在 2-10 个字符之间</span>
      <span v-else-if="contain(Violation.REVALIDATE_INVALID)">用户名已注册</span>
      <span v-else>Unknown</span>
    </template>
    <template #expect-feedback>发生未知错误, 请重新尝试</template>
      
    <Label>用户名</Label>
    <TextInput name="username" placeholder="Please enter username" minlength="2" maxlength="10" :revalidate="revalidate"/>
  </FormGroup>
</Form>
</template>

<script setup>
import { From, FormGroup, Label, TextInput, Violation } from '@tomoeed/j-form';

function revalidate(value) {
    switch (value) {
        case 'existed':
            return Promise.resolve(false);
        default:
            return Promise.resolve(true);
    }
}
</script>