一、获取表单元素
在JS中，获取表单元素可以使用querySelector方法或getElementById方法，这里我们演示使用querySelector方法获取表单元素：
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
</form>
<script>
const form = document.querySelector('#myForm');
const username = form.querySelector('input[name="username"]');
const password = form.querySelector('input[name="password"]');
</script>
二、表单验证
在提交表单之前，一般会进行表单验证，以确保用户输入的内容符合规范。这里我们演示一个简单的表单验证示例：
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('#myForm');
const username = form.querySelector('input[name="username"]');
const password = form.querySelector('input[name="password"]');
form.addEventListener('submit', e => {
e.preventDefault(); // 阻止表单默认提交
if (username.value.trim() === '') {
alert('用户名不能为空');
return;
}
if (password.value.trim() === '') {
alert('密码不能为空');
return;
}
form.submit(); // 手动提交表单
});
</script>
三、手动提交表单
在表单验证通过后，可以使用form.submit()方法手动提交表单。注意，手动提交表单时，需要阻止表单默认提交行为，否则表单会被提交两次。
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('#myForm');
const username = form.querySelector('input[name="username"]');
const password = form.querySelector('input[name="password"]');
form.addEventListener('submit', e => {
e.preventDefault(); // 阻止表单默认提交
if (username.value.trim() === '') {
alert('用户名不能为空');
return;
}
if (password.value.trim() === '') {
alert('密码不能为空');
return;
}
form.submit(); // 手动提交表单
});
</script>
四、异步提交表单
在很多场景下，我们需要通过AJAX方式异步提交表单。这里我们演示一个使用fetch API进行异步提交表单的示例：
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('#myForm');
const username = form.querySelector('input[name="username"]');
const password = form.querySelector('input[name="password"]');
form.addEventListener('submit', e => {
e.preventDefault(); // 阻止表单默认提交
if (username.value.trim() === '') {
alert('用户名不能为空');
return;
}
if (password.value.trim() === '') {
alert('密码不能为空');
return;
}
fetch('/api/submit', {
method: 'POST',
body: new FormData(form)
})
.then(response => response.json())
.then(data => {
// 处理响应数据
})
.catch(error => {
console.error(error);
});
});
</script>
五、文件上传
在表单中有文件上传的情况下，需要设置form的enctype属性为multipart/form-data，并将文件数据追加到FormData对象中：
<form id="myForm" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('#myForm');
const fileInput = form.querySelector('input[name="file"]');
form.addEventListener('submit', e => {
e.preventDefault(); // 阻止表单默认提交
const formData = new FormData(form);
formData.append('file', fileInput.files[0]);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
// 处理响应数据
})
.catch(error => {
console.error(error);
});
});
</script>
