Vue.js: 表单与 v-model

<!-- v-model 是 props + emit 的语法糖 -->
<input v-model="searchQuery">

<!-- 等同于 -->
<input 
  :value="searchQuery" 
  @input="searchQuery = $event.target.value"
>

<!-- 父组件使用 v-model -->
<CustomInput v-model="searchQuery" />

<!-- 等同于 -->
<CustomInput 
  :modelValue="searchQuery" 
  @update:modelValue="searchQuery = $event"
/>

<!-- 父组件：v-model.trim -->
<CustomInput v-model.trim="username" />

<!-- 子组件：处理 trim 修饰符 -->
<script setup>
const props = defineProps({
  modelValue: String,
  modelModifiers: { default: () => ({}) }
})
const emit = defineEmits(['update:modelValue'])

function onInput(e) {
  let value = e.target.value
  if (props.modelModifiers.trim) {
    value = value.trim()
  }
  emit('update:modelValue', value)
}
</script>

自定义输入框显示父组件传入的 search 值；输入时触发 update:modelValue，父组件的 search 同步更新。
使用 v-model:username / v-model:password 时，两个字段各自独立双向绑定，修改一个不会影响另一个。

// utils/validators.js
export function isEmail(value) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
}

export function isPhone(value) {
  return /^1[3-9]\d{9}$/.test(value)
}

export function minLength(value, min) {
  return value.length >= min
}

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.email" @blur="validateField('email')">
    <p v-if="errors.email" class="error">{{ errors.email }}</p>
    
    <input v-model="form.password" type="password">
    <p v-if="errors.password">{{ errors.password }}</p>
    
    <button :disabled="!isValid">Submit</button>
  </form>
</template>

<script setup>
const { reactive, ref } = Vue
import { isEmail, minLength } from '@/utils/validators'

const form = reactive({
  email: '',
  password: ''
})

const errors = reactive({})
const isValid = ref(false)

function validateField(field) {
  if (field === 'email') {
    if (!form.email) {
      errors.email = 'Email is required'
    } else if (!isEmail(form.email)) {
      errors.email = 'Invalid email format'
    } else {
      delete errors.email
    }
  }
  
  if (field === 'password') {
    if (!form.password) {
      errors.password = 'Password is required'
    } else if (!minLength(form.password, 8)) {
      errors.password = 'Password must be 8+ characters'
    } else {
      delete errors.password
    }
  }
  
  isValid.value = Object.keys(errors).length === 0
}

function handleSubmit() {
  Object.keys(form).forEach(validateField)
  if (isValid.value) {
    console.log('Submit:', form)
  }
}
</script>

npm install vee-validate @vee-validate/rules

<template>
  <Form @submit="handleSubmit" :validation-schema="schema">
    <Field name="email" type="email" v-model="form.email" />
    <ErrorMessage name="email" />
    
    <Field name="password" type="password" v-model="form.password" />
    <ErrorMessage name="password" />
    
    <button>Submit</button>
  </Form>
</template>

<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate'
import * as yup from 'yup'

const schema = yup.object({
  email: yup.string().email().required(),
  password: yup.string().min(8).required()
})

const form = reactive({ email: '', password: '' })

function handleSubmit(values) {
  console.log('Valid:', values)
}
</script>

const form = reactive({
  user: {
    name: '',
    email: '',
    age: 0
  },
  address: {
    city: '',
    country: ''
  }
})

const form = reactive({
  items: [
    { name: '', quantity: 1, price: 0 }
  ]
})

function addItem() {
  form.items.push({ name: '', quantity: 1, price: 0 })
}

function removeItem(index) {
  form.items.splice(index, 1)
}

<!-- 1. .lazy：change 事件触发（不是 input） -->
<input v-model.lazy="email">

<!-- 2. .number：自动转数字 -->
<input v-model.number="age" type="number">

<!-- 3. .trim：自动去空格 -->
<input v-model.trim="username">

<!-- 4. 自定义修饰符（CustomInput） -->
<CustomInput v-model.trim="text" />

<!-- 5. .debounce（自定义修饰符）：DebouncedInput 组件内部通过 modelModifiers 实现 -->
<DebouncedInput v-model.debounce="searchText" />

<!-- 1. .lazy：change 事件（失焦后）-->
<input v-model.lazy="email">

<!-- 2. .number：自动转数字 -->
<input v-model.number="age" type="number">

<!-- 3. .trim：自动 trim -->
<input v-model.trim="username">

<!-- 4. 多修饰符组合 -->
<input v-model.lazy.trim="email">

<!-- 5. 自定义修饰符（子组件） -->
<CustomInput v-model.trim="text" />

.lazy 输入时不同步，失焦或回车后才更新绑定的 email。
.number 把输入的年龄自动转成数字类型；.trim 自动去掉用户名首尾空格。
组合 .lazy.trim 在失焦时一次性更新并去除空格；子组件上的 v-model.trim 会把修饰符传入。

页面显示「注册表单（5 字段 + 校验）」和 5 个输入框，字段下方错误提示为空，「注册」按钮置灰。
用户名留空失焦提示 Required；邮箱不含 @ 提示 Invalid email；年龄小于 18 提示 Age must be 18-120；密码不足 8 位、两次密码不一致也分别给出提示。
全部字段合法后出现绿色「✅ 表单通过校验！可提交」，「注册」按钮变为可点，点击弹出包含表单 JSON 的 alert。