寻北

Appearance

Form 表单 ​

使用表单，您可以收集、验证和提交数据。

典型表单 ​

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

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

<script setup>
import { reactive, ref } from 'vue'
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
const formRef = ref()
const model = reactive({
  email: '',
  password: '',
  status:false,
  activity:''
})
const options = [
  { label: '唱', value: '1' },
  { label: '跳', value: '2' },
  { label: 'Rap', value: '3' },
  { label: '打篮球', value: '4' }
]
const submit = async () => {
  console.log('submit')
}
const reset = () => {
  console.log('reset')
}
</script>

<template>
  <div>
    <vk-form ref="formRef" :model="model">
      <vk-form-item label="the email" prop="email">
        <vk-input v-model="model.email" type="text"/>
      </vk-form-item>
      <vk-form-item label="the password" prop="password">
        <vk-input v-model="model.password" type="password" />
      </vk-form-item>
      <vk-form-item label="the status" prop="status">
        <vk-switch v-model="model.status"  type="status"/>
      </vk-form-item>
      <vk-form-item label="the activity" prop="activity">
        <vk-select v-model="model.activity" placeholder="选择活动" :options="options" />
      </vk-form-item>
      <div :style="{ textAlign: 'center' }">
        <vk-button type="primary" @click.prevent="submit">Submit</vk-button>
        <vk-button @click.prevent="reset">Reset</vk-button>
      </div>
    </vk-form>
  </div>
</template>

<style></style>

表单校验 ​

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

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

<script setup>
import { reactive, ref } from 'vue'
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
const formRef = ref()
const model = reactive({
  email: '',
  password: '',
  status:false,
})

const rules = {
  email: [{ type: 'string', required: true, trigger: 'blur' }],
  password: [{ type: 'string', required: true, trigger: 'blur'}],
}

const submit = async () => {
  try {
    await formRef.value.validate()
    console.log('passed!')
  } catch (e) {
    console.log('the error', e)
  }
}
const reset = () => {
  formRef.value.resetFields()
}
</script>

<template>
  <div>
    <vk-form ref="formRef" :model="model" :rules="rules">
      <vk-form-item label="the email" prop="email">
        <vk-input v-model="model.email" type="text"/>
      </vk-form-item>
      <vk-form-item label="the password" prop="password">
        <vk-input v-model="model.password" type="password" />
      </vk-form-item>
      <vk-form-item label="the status" prop="status">
        <vk-switch v-model="model.status"  type="status"/>
      </vk-form-item>
      <div :style="{ textAlign: 'center' }">
        <vk-button type="primary" @click.prevent="submit">Submit</vk-button>
        <vk-button @click.prevent="reset">Reset</vk-button>
      </div>
    </vk-form>
  </div>
</template>

<style></style>

自定义校验规则 ​

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。

<script setup>
import { reactive, ref } from 'vue'
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
const formRef = ref()
const model = reactive({
  email: '',
  password: '',
  confirmPwd: '',
  status:false,
})


const submit = async () => {
  try {
    await formRef.value.validate()
    console.log('passed!')
  } catch (e) {
    console.log('the error', e)
  }
}
const reset = () => {
  formRef.value.resetFields()
}

const checkPassword = (rule,value,callback) => {
  if (!value) {
    return callback(new Error('Please input the age'))
  }else{
    if(model.password!==value){
      return callback('密码输入不一致')
    }else{
      return callback()
    }
  }
}
const rules = {
  email: [{ type: 'string', required: true, trigger: 'blur' }],
  password: [{ type: 'string', required: true, trigger: 'blur'}],
  confirmPwd: [{ type: 'string', required: true, trigger: 'blur'}, {
    validator: checkPassword,
    trigger: 'blur',
    message: '两个密码必须相同'
  }],
}
</script>

<template>
  <div>
    <vk-form ref="formRef" :model="model" :rules="rules">
      <vk-form-item label="the email" prop="email">
        <vk-input v-model="model.email" type="text"/>
      </vk-form-item>
      <vk-form-item label="the password" prop="password">
        <vk-input v-model="model.password" type="password" />
      </vk-form-item>
      <vk-form-item label="the confirmPwd" prop="confirmPwd">
        <vk-input v-model="model.confirmPwd" type="password" />
      </vk-form-item>
      <vk-form-item label="the status" prop="status">
        <vk-switch v-model="model.status"  type="status"/>
      </vk-form-item>
      <div :style="{ textAlign: 'center' }">
        <vk-button type="primary" @click.prevent="submit">Submit</vk-button>
        <vk-button @click.prevent="reset">Reset</vk-button>
      </div>
    </vk-form>
  </div>
</template>

<style></style>

Form API ​

Form Attribute ​

属性名详情类型默认值
model表单数据对象object—
rules表单验证规则object—

Form Events ​

事件名说明类型
validate任一表单项被校验后触发Function
resetFields重置该表单项，将其值重置为初始值，并移除校验结果Function
clearValidate清理某个字段的表单验证信息。Function

Form Slots ​

插槽名描述子标签
default自定义默认内容FormItem

Form Exposes ​

方法名说明类型
validate对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise。Function
resetFields重置该表单项，将其值重置为初始值，并移除校验结果Function
clearValidate清理某个字段的表单验证信息。Function

Form Item API ​

Form Item Attributes ​

属性名详情类型默认值
propmodel 的键名。string—
label标签文本string—

Form Item Slot ​

名称说明类型
label标签位置显示的内容object

Form Item Exposes ​

名称说明类型
clearValidate移除该表单项的校验结果Function
validateState校验状态Function
resetField对该表单项进行重置，将其值重置为初始值并移除校验结果Function
validate验证表单项Function