Form表单

基础用法

最基础的表单包括各种输入表单项，比如input、select、radio、checkbox等。

在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值

用户名

密码

<vt-form
  ref="formRef"
  :model="state"
>
  <vt-form-item 
    prop="username" 
  >
    <vt-input placeholder="请输入用户名" v-model="state.username"></vt-input>
    <template #label>用户名</template>
  </vt-form-item>
  <vt-form-item 
    prop="password" 
  >
    <vt-input placeholder="请输入密码" v-model="state.password" type="password"></vt-input>
    <template #label>密码</template>
  </vt-form-item>
  <vt-button type="primary" @click="handleCheck">
    确认
  </vt-button>
  <vt-button @click="handleCheck">
    取消
  </vt-button>
</vt-form>

表单校验

Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。

Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可

用户名

密码

<vt-form
  ref="formRef"
  :model="state"
  :rules="{
    username: {min: 6, max: 10,  message: '用户名6-10位', trigger: ['change', 'blur']}
  }"
>
  <vt-form-item 
    prop="username" 
    :rules="[
      {required: true, message: '请输入用户名', trigger: 'blur'}
    ]"
  >
    <vt-input placeholder="请输入用户名" v-model="state.username"></vt-input>
    <template #label>用户名</template>
  </vt-form-item>
  <vt-form-item 
    prop="password" 
    :rules="[
      {required: true, message: '请输入密码', trigger: 'blur'}
    ]"
  >
    <vt-input placeholder="请输入密码" v-model="state.password" type="password"></vt-input>
    <template #label>密码</template>
  </vt-form-item>
  <vt-button type="primary" @click="handleCheck">
    确认
  </vt-button>
  <vt-button @click="handleCheck">
    取消
  </vt-button>
</vt-form>

Form API

属性

名称	类型	默认值	说明
model	Object	-	表单数据对象
rules	Object	-	表单校验规则
show-message	boolean	true	是否展示校验信息

事件

名称	类型	说明
validate	Object	表单项被校验后触发

插槽

名称	子标签	说明
default	FormItem	自定义默认内容

FormItem API

属性

名称	类型	默认值	说明
props	string	-	model的键名
label	string	-	标签文本
rules	Object	true	表单校验规则
show-message	boolean	true	是否展示校验信息

插槽

名称	类型	说明
default	-	表单内容
label	String	标签位置显示内容
error	String	验证错误信息显示内容