Os UiForm 表单
高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
基础用法
一般地，需要与os-form-group结合使用。
layout能决定表单默认样式，目前只支持三个模式分别为horizontal、vertical、inline，默认为horizontal
label-width能设置label宽度，在vertical情况时相对有用处。
html
<os-form
ref="osFormRef">
<os-form-group label="Name" prop="name">
<os-input v-model="details.name"></os-input>
</os-form-group>
<!-- ...Other -->
</os-form>表单校验
需要结合os-form os-form-group共同使用
os-form需要添加model绑定数据实例与rules验证规则（更多高级用法可参考async-validator）
os-form-group需要添加prop参数，来自os-form添加的modelJSON数据里对应的字段名。
html
<script setup>
import { ref, reactive } from 'vue'
const osFormRef = ref()
const details = reactive({
name: ''
})
const rules = {
name: [
{
required: true,
trigger: 'blur',
message: 'please Enter Name!'
}
]
}
const handleSubmit = () => {
osFormRef.value.check()
}
const handleReset = () => {
osFormDom.value.clearCheck()
osFormRef.value.resetField()
}
</script>
<os-form
:model="details"
:rules="rules"
ref="osFormRef">
<os-form-group label="Name" prop="name">
<os-input v-model="details.name"></os-input>
</os-form-group>
<!-- ...Other -->
<div>
<os-button type="primary" @click="handleSubmit">Submit</os-button>
<os-button class="os-margin-left-xs" @click="handleReset">Reset</os-button>
</div>
</os-form>自定义校验
可在rules添加validator: Function(rules, value, callback)函数添加自定义验证方法，callback为必需要运行的方法，下例如存在'OS'，会报错
html
<script setup>
import { ref, reactive } from 'vue'
const osFormRef = ref()
const details = reactive({
name: ''
})
const rules = {
name: [
{
required: true,
trigger: 'blur',
message: 'please Enter Name!'
},
{
validator: (rule, value, callback) => {
if (value.indexOf('OS') >= 0) {
callback(new Error('This is validator message'))
} else {
callback()
}
},
trigger: 'blur'
}
]
}
</script>
<os-form
:model="details"
:rules="rules"
ref="osFormRef">
<os-form-group label="Name" prop="name">
<os-input v-model="details.name"></os-input>
</os-form-group>
<!-- ...Other -->
</os-form>Form Exposes
| 名称 | 描述 | 类型 |
|---|---|---|
| check | 校验表单方法，能接收一个回调函数或Promise | (callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => Promise<void> |
| checkField | 能传入prop名称对应校验，能接收一个回调函数或Promise | (prop: String, callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => Promise<void> |
| clearCheck | 清除校验记录 | |
| resetField | 重置表单数据，能传入prop名称对应清除,不传则整体清除 |