写一个不用vue.js 的表单过滤
时间: 2023-12-03 14:47:06 浏览: 38
好的,下面是一个简单的表单过滤示例,不使用 Vue.js:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单过滤</title>
</head>
<body>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br>
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone"><br>
<button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const name = form.elements.name.value;
const email = form.elements.email.value;
const phone = form.elements.phone.value;
if (!name) {
alert('请输入姓名');
return;
}
if (!email) {
alert('请输入邮箱');
return;
}
if (!phone) {
alert('请输入电话');
return;
}
console.log(`姓名:${name},邮箱:${email},电话:${phone}`);
form.reset();
});
</script>
</body>
</html>
```
这个示例包含一个简单的 HTML 表单,当用户提交表单时,JavaScript 将获取表单中的姓名、邮箱和电话,然后检查这些值是否为空。如果任何一个值为空,它将显示一个警告框,并且表单不会被提交。否则,它将将这些值打印到控制台,并重置表单。