一个页面两个表单怎么校验
时间: 2024-05-15 17:12:32 浏览: 16
可以给每个表单单独设置校验规则和校验函数。当用户提交表单时,分别对两个表单进行校验。如果两个表单都通过了校验,再进行提交操作。
以下是一个简单的示例代码:
```html
<form id="form1">
<input type="text" name="name" required>
<input type="email" name="email" required>
<button type="submit">提交表单1</button>
</form>
<form id="form2">
<input type="text" name="phone" required>
<input type="password" name="password" required>
<button type="submit">提交表单2</button>
</form>
<script>
// 校验表单1
const form1 = document.getElementById('form1');
form1.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止默认提交操作
if (form1.checkValidity()) {
// 表单1校验通过,可以进行提交操作
console.log('表单1校验通过');
// TODO: 提交表单1
}
});
// 校验表单2
const form2 = document.getElementById('form2');
form2.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止默认提交操作
if (form2.checkValidity()) {
// 表单2校验通过,可以进行提交操作
console.log('表单2校验通过');
// TODO: 提交表单2
}
});
</script>
```
在上面的示例代码中,我们分别给表单1和表单2设置了校验规则和校验函数,并在提交按钮上添加了一个点击事件监听器。当用户点击提交按钮时,分别对两个表单进行校验,只有当两个表单都通过了校验,才可以进行提交操作。