iter(g91): 表单字段补辅助说明 hint
This commit is contained in:
@@ -35,8 +35,9 @@ export function formItem(props: FormItemProps, control: HTMLElement): FormItemHa
|
||||
const mode = props.validateOn ?? 'blur'; // 校验时机;缺省失焦校验
|
||||
const rules = [...(props.required ? [{ required: true }] : []), ...(props.rules ?? [])]; // 必填规则排最前
|
||||
const error = h('div', { class: 'ua-form-error' });
|
||||
const hint = props.hint ? h('div', { class: 'ua-form-hint' }, props.hint) : null; // 辅助说明:报错时隐藏,避免与错误挤在一起
|
||||
const label = h('label', { class: 'ua-form-label' }, props.label, props.required ? h('i', { class: 'ua-form-req' }, '*') : null);
|
||||
const el = h('div', { class: 'ua-form-item' }, label, h('div', { class: 'ua-form-control' }, control, error));
|
||||
const el = h('div', { class: 'ua-form-item' }, label, h('div', { class: 'ua-form-control' }, control, hint, error));
|
||||
let seq = 0; // 校验轮次:异步结论回来时若已有更新的一轮,丢弃旧结果(防乱序覆盖)
|
||||
|
||||
/*** 错误态落点:控件根 + 内部原生控件,保证 select / checkbox 这类包裹式控件也能标红 ***/
|
||||
@@ -48,6 +49,7 @@ export function formItem(props: FormItemProps, control: HTMLElement): FormItemHa
|
||||
/*** 落笔:错误文案 + 控件红框 + aria-invalid,视觉与读屏同源 ***/
|
||||
const paint = (msg: string | null): void => {
|
||||
error.textContent = msg ?? '';
|
||||
if (hint) hint.hidden = !!msg; // 有错时让位:同一位置只留一条提示
|
||||
control.classList.toggle('ua-invalid', !!msg);
|
||||
for (const node of marked()) node.setAttribute('aria-invalid', String(!!msg));
|
||||
};
|
||||
|
||||
@@ -363,6 +363,7 @@ export interface FormItemProps {
|
||||
required?: boolean; // 必填:显示红星并自动追加非空规则
|
||||
rules?: FormRule[]; // 附加校验规则,按序执行
|
||||
validateOn?: 'input' | 'blur' | 'submit'; // 校验时机;缺省 blur
|
||||
hint?: string; // 控件下方辅助说明(格式提示等);报错时让位给错误文案
|
||||
}
|
||||
|
||||
/*** 表单字段句柄:form 聚合校验用 ***/
|
||||
|
||||
Reference in New Issue
Block a user