表单交互
表单是收集用户输入的主要方式，良好的表单交互设计能提升数据录入效率和准确性。
表单元素类型
输入框
text、email、password、number等，用于文本输入
选择控件
select下拉框、radio单选、checkbox复选，用于选项选择
日期时间
date、time、datetime-local，用于日期时间选择
文件上传
file类型，用于文件选择和上传
表单验证策略
| 验证类型 | 实现方式 | 优缺点 |
|---|---|---|
| 实时验证 | 用户输入时立即验证并反馈 | 即时反馈，但可能干扰用户输入 |
| 提交时验证 | 点击提交按钮时统一验证 | 不干扰输入，但反馈延迟 |
| 混合验证 | 结合实时和提交时验证 | 平衡体验和效率 |
表单实现方式
原生JavaScript
直接操作DOM元素，手动处理表单数据
// HTML:
<form id="userForm">
<input type="text" id="username" name="username" required />
<input type="email" id="email" name="email" required />
<input type="password" id="password" name="password" required />
<button type="submit">提交</button>
</form>
// JavaScript:
const form = document.getElementById('userForm');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
// 实时验证
username.addEventListener('input', validateUsername);
email.addEventListener('input', validateEmail);
form.addEventListener('submit', function(e) {
e.preventDefault();
if (validateForm()) {
const formData = new FormData(form);
// 提交表单数据
submitForm(formData);
}
});
function validateUsername() {
const value = username.value;
if (value.length < 3) {
showError(username, '用户名至少3个字符');
return false;
}
clearError(username);
return true;
}
function validateForm() {
return validateUsername() && validateEmail() && validatePassword();
}
Vue.js实现
使用v-model双向绑定，简化表单处理
<!-- Vue模板 -->
<template>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<input
v-model="form.username"
@blur="validateUsername"
:class="{ 'error': errors.username }"
type="text"
placeholder="用户名"
required />
<span v-if="errors.username" class="error-msg">{{ errors.username }}</span>
</div>
<div class="form-group">
<input
v-model="form.email"
@input="validateEmail"
:class="{ 'error': errors.email }"
type="email"
placeholder="邮箱"
required />
<span v-if="errors.email" class="error-msg">{{ errors.email }}</span>
</div>
<div class="form-group">
<input
v-model="form.password"
type="password"
placeholder="密码"
required />
</div>
<button type="submit" :disabled="!isFormValid">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
email: '',
password: ''
},
errors: {}
}
},
computed: {
isFormValid() {
return !this.errors.username &&
!this.errors.email &&
this.form.password.length >= 6;
}
},
methods: {
validateUsername() {
if (this.form.username.length < 3) {
this.$set(this.errors, 'username', '用户名至少3个字符');
} else {
this.$delete(this.errors, 'username');
}
},
validateEmail() {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(this.form.email)) {
this.$set(this.errors, 'email', '请输入有效的邮箱地址');
} else {
this.$delete(this.errors, 'email');
}
},
handleSubmit() {
if (this.isFormValid) {
// 提交表单
this.$emit('form-submit', this.form);
}
}
}
}
</script>