vue3 表单功能开发

### Vue 3 表单功能开发 #### 创建基础表单组件 为了创建一个简单的登录表单，在 `src/components` 文件夹下新建名为 `LoginForm.vue` 的文件。 ```html <template> <form @submit.prevent="handleSubmit"> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Email address</label> <input v-model.trim="formData.email" type="email" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required /> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input v-model.lazy="formData.password" type="password" id="exampleInputPassword1" placeholder="Password" required /> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </template> <script setup> import { reactive } from 'vue'; const formData = reactive({ email: '', password: '' }); function handleSubmit() { console.log('Form Data:', formData); } </script> ``` 此代码展示了如何利用 `v-model` 指令绑定输入框到响应式对象属性上[^1]。通过这种方式可以轻松获取用户的输入数据并处理提交事件。 #### 使用 Composition API 进行状态管理 对于更复杂的应用场景，推荐采用组合函数来封装逻辑。下面是一个关于验证规则的例子： ```javascript // src/composables/useValidation.js export function useValidation(initialValue, validator) { const value = ref(initialValue); let isValid = computed(() => validator(value.value)); watchEffect(() => { // 执行一些副作用操作... }); return { value, isValid }; } ``` 在实际项目里可以根据需求调整上述方法中的参数列表以及内部实现细节[^2]。 #### 验证用户输入的有效性 当涉及到前端校验时，通常会借助第三方库如 Vuelidate 或者 FormKit 来简化工作流程；当然也可以自行编写自定义指令来进行基本的检验任务。 ```html <!-- LoginForm.vue --> <div :class="{ error: !isValidEmail && touched.email }"> <span>Email is not valid!</span> </div> <input v-model="email" @blur="touched.email = true" /> <script setup> import { ref, watch } from "vue"; let email = ref(""); let touched = reactive({ email: false }); let isValidEmail = computed(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value) ); watch(isValidEmail, () => (touched.email = true)); </script> ``` 这段脚本实现了对电子邮件地址格式的基本检测，并且只有当字段失去焦点之后才会显示错误提示信息[^3]。