表单与校验

Form + Field 负责布局、标签、帮助文本以及支持 i18n 的校验，使用 @thl-ui/core 中共享的 rules。错误在首次提交后显示并实时更新；提示信息跟随当前语言。

校验

校验

Vue

<ThlForm :values="v" @submit="submit">
  <ThlField label="Name" name="name" :value="v.name" :rules="[rules.required(), rules.minLength(3)]" required v-slot="{ id }"><ThlInput :id="id" v-model="v.name" /></ThlField>
  <ThlField label="Email" name="email" :value="v.email" :rules="[rules.required(), rules.email()]" required v-slot="{ id }"><ThlInput :id="id" v-model="v.email" type="email" /></ThlField>
  <ThlField label="Password" name="password" :value="v.password" :rules="[rules.required(), rules.minLength(6)]" required v-slot="{ id }"><ThlInput :id="id" v-model="v.password" type="password" /></ThlField>
  <ThlField label="Confirm" name="confirm" :value="v.confirm" :rules="[rules.match('password')]" v-slot="{ id }"><ThlInput :id="id" v-model="v.confirm" type="password" /></ThlField>
  <ThlField name="agree" :value="v.agree" :rules="[rules.required()]"><ThlCheckbox v-model="v.agree" label="I agree to the terms" /></ThlField>
  <ThlFormActions><ThlButton type="submit" variant="success" icon="check">Submit</ThlButton><ThlButton type="reset">Reset</ThlButton></ThlFormActions>
</ThlForm>

React

import { Form, Field, FormActions, Input, Checkbox, Button, rules } from '@thl-ui/react';

<Form values={v} onSubmit={(values, ok) => ok && save(values)}>
  <Field label="Email" name="email" value={v.email} rules={[rules.required(), rules.email()]} required>
    {(id) => <Input id={id} type="email" value={v.email} onChange={(e) => setV({ ...v, email: e.target.value })} />}
  </Field>
  <Field name="agree" value={v.agree} rules={[rules.required()]}>
    <Checkbox checked={v.agree} onChange={(agree) => setV({ ...v, agree })} label="I agree" />
  </Field>
  <FormActions><Button type="submit" variant="success">Submit</Button></FormActions>
</Form>

Angular

form = new FormGroup({
  email: new FormControl('', thlValidators(rules.required(), rules.email())),
  agree: new FormControl(false, thlValidators(rules.required())),
});

<form class="thl-form" [formGroup]="form" (ngSubmit)="submit()">
  <thl-field label="Email" for="email" required [control]="form.controls.email">
    <input thlInput id="email" formControlName="email" />
  </thl-field>
  <thl-field [control]="form.controls.agree"><thl-checkbox formControlName="agree" label="I agree" /></thl-field>
  <div class="thl-form__actions"><button thl-button type="submit" variant="success">Submit</button></div>
</form>

布局与状态

布局与状态

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6"><ThlForm layout="horizontal"><ThlField label="Name" for="h1"><ThlInput id="h1" /></ThlField><ThlField label="Email" for="h2"><ThlInput id="h2" /></ThlField></ThlForm></div>
  <div class="thl-col-12 thl-col-md-6"><ThlField label="Success" status="success" help="Looks good!"><ThlInput model-value="ok" /></ThlField><ThlField label="Error" error="Something went wrong"><ThlInput /></ThlField></div>
</div>

React

<Form layout="horizontal">…</Form>
<Field label="Success" status="success" help="Looks good!"><Input defaultValue="ok" /></Field>
<Field label="Error" error="Something went wrong"><Input /></Field>

Angular

<form class="thl-form thl-form--horizontal">…</form>
<thl-field label="Success" status="success" help="Looks good!"><input thlInput value="ok" /></thl-field>
<thl-field label="Error" error="Something went wrong"><input thlInput /></thl-field>

校验规则

rules.required()、email()、minLength(n)、maxLength(n)、min(n)、max(n)、number()、pattern(re)、match(field)。规则是一个 (value, allValues) => { key, params } | null 函数——自定义规则的 key 也会像内置规则一样被翻译：

const strong: Rule = (v) => /[A-Z]/.test(String(v ?? '')) ? null : { key: 'app.validation.uppercase' };

对于未勾选的复选框（false），required 同样会校验失败。

API

Form

<ThlForm> · import { ThlForm } from '@thl-ui/vue'

Prop	类型	默认值
layout	string	"vertical"
bordered	boolean	—
values	object	—

事件: submit

插槽: default

Field

<ThlField> · import { ThlField } from '@thl-ui/vue'

Prop	类型	默认值
label	string	—
help	string	—
error	string	—
required	boolean	—
name	string	—
value	any	—
rules	array	—
status	string	—
for	string	—

插槽: default

FormActions

<ThlFormActions> · import { ThlFormActions } from '@thl-ui/vue'

Prop	类型	默认值

插槽: default