Form 表单
基础用法
最基础的表单功能,使用 form-item
组件作为 form
输入项的容器
vue
<script setup lang="ts">
import type { FormInstance } from '@sets-ui/main';
import { ref, reactive } from 'vue'
const formRef = ref<FormInstance>();
const form = reactive({
name: '',
type: '',
})
const hanldeSubmit = () => {
console.log('submit!');
};
</script>
<template>
<s-form ref="formRef" :model="form">
<s-form-item label="名称">
<s-input v-model="form.name" placeholder="请输入名称" style="width: 200px;" />
</s-form-item>
<s-form-item label="工作类型">
<s-radio-group v-model="form.type">
<s-radio value="A">前端开发</s-radio>
<s-radio value="B">后端开发</s-radio>
</s-radio-group>
</s-form-item>
<s-form-item>
<s-button type="primary" @click="hanldeSubmit">提交</s-button>
</s-form-item>
</s-form>
</template>
表单校验
为 rules
属性传入约定的验证规则,并将 form-Item
的 name
属性设置为需要验证的键值即可
vue
<script setup lang="ts">
import type { FormInstance } from '@sets-ui/main';
import { ref, reactive } from 'vue'
const formRef = ref<FormInstance>();
const form = reactive({
name: '',
type: '',
})
const rules = {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
{ min: 2, max: 4, message: '请输入2到4位的名称', trigger: 'blur' },
],
type: [
{ required: true, message: '请选择类型' },
],
};
const hanldeSubmit = () => {
if (!formRef.value) return;
formRef.value.validate().then((res) => {
console.log('校验成功', res);
}).catch((res) => {
console.log('校验失败', res);
});
};
</script>
<template>
<s-form ref="formRef" :model="form" :rules="rules">
<s-form-item label="名称" name="name">
<s-input v-model="form.name" placeholder="请输入名称" style="width: 200px;" />
</s-form-item>
<s-form-item label="工作类型" name="type">
<s-radio-group v-model="form.type">
<s-radio value="A">前端开发</s-radio>
<s-radio value="B">后端开发</s-radio>
</s-radio-group>
</s-form-item>
<s-form-item>
<s-button type="primary" @click="hanldeSubmit">提交</s-button>
</s-form-item>
</s-form>
</template>
自定义校验
为 rules
属性传入约定的验证规则,可以使用 validator
字段返回一个 Promise
来确定校验状态
vue
<script setup lang="ts">
import type { FormInstance } from '@sets-ui/main';
import { ref, reactive } from 'vue'
const formRef = ref<FormInstance>();
const form = reactive({
name: '',
salary: 10000,
type: '',
})
const salaryValidating = ref(false);
const rules = {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
{ min: 2, message: '名称最少为两位', trigger: 'blur' },
{
validator: (value: any) => {
return new Promise((resolve, reject) => {
if (value !== '黑奴') {
reject('名称错误,为您查询到名称: 黑奴')
} else {
resolve(true);
}
})
},
trigger: 'blur',
}
],
salary: [
{ required: true, message: '请输入期望薪资' },
{
validator: (value: any) => {
return new Promise((resolve, reject) => {
if (isNaN(parseFloat(value))) return reject('请输入数字!');
salaryValidating.value = true;
window.setTimeout(() => {
if (Number.parseInt(value, 10) > 2100) {
reject('薪资最高不得超过2100!')
} else {
resolve(true);
}
salaryValidating.value = false;
}, 3000);
})
},
}
],
type: [
{ required: true, message: '请选择类型' },
],
};
const hanldeSubmit = () => {
if (!formRef.value) return;
formRef.value.validate().then((res) => {
console.log('校验成功', res);
}).catch((res) => {
console.log('校验失败', res);
});
};
const hanldeSubmitField = () => {
if (!formRef.value) return;
formRef.value.validateField(['salary']).then((res) => {
console.log('校验成功', res);
}).catch((res) => {
console.log('校验失败', res);
});
};
const hanldeReset = () => {
if (!formRef.value) return;
formRef.value.resetFields();
}
</script>
<template>
<s-form ref="formRef" :model="form" :rules="rules">
<s-form-item label="名称" name="name">
<s-input v-model="form.name" placeholder="请输入名称" style="width: 200px;" />
</s-form-item>
<s-form-item label="期望薪资" name="salary">
<s-input v-model="form.salary" placeholder="请输入期望薪资" style="width: 200px;" />
<span v-show="salaryValidating" style="margin-left: 5px;font-size: 12px;">校验中...</span>
</s-form-item>
<s-form-item label="工作类型" name="type">
<s-radio-group v-model="form.type">
<s-radio value="A">前端开发</s-radio>
<s-radio value="B">后端开发</s-radio>
</s-radio-group>
</s-form-item>
<s-form-item>
<s-button type="primary" @click="hanldeSubmit">提交</s-button>
<s-button type="primary" @click="hanldeSubmitField">校验</s-button>
<s-button @click="hanldeReset">重置</s-button>
</s-form-item>
</s-form>
</template>
Form API
Form Attributes
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
model | 表单数据对象 | { [key: string]: any } | - |
rules | 表单验证规则 | FormRules | - |
label-width | 标签的长度 | number | - |
Form Exposes
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
validateField | 验证具体的某个字段。 | (names: Array<string>) => Promise(ValidateErrorInfo) | - |
validate | 对整个表单的内容进行验证。 | (names: Array<string>) => Promise(ValidateErrorInfo) | false |
clearValidate | 清理整个表单的验证信息。 | () => void | - |
resetFields | 重置该表单项,将其值重置为初始值,并移除校验结果 |
Form Item API
Form Item Attributes
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | 标签文本 | string | - |
name | model 的键名 | string | - |
label-width | 标签的长度 | number | - |
Form Item CSS
名称 | 说明 | 默认值 |
---|---|---|
--s-form-item-size-base | 基准规格(字体、行高)大小 | var(--base-font-size) |
--s-form-item-grap-label | label与content的检举 | 12px |