表单使用js进行页面设计的交互页面具体代码实现
时间: 2023-08-14 09:06:03 浏览: 48
表单的交互页面可以使用JavaScript实现,下面是一个简单的表单交互页面的代码示例:
HTML代码:
```
<form id="myForm">
<label for="name">名字:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<button type="submit">提交</button>
</form>
```
JavaScript代码:
```
const form = document.querySelector('#myForm');
const nameInput = document.querySelector('#name');
const emailInput = document.querySelector('#email');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const nameValue = nameInput.value;
const emailValue = emailInput.value;
if (!nameValue || !emailValue) { // 判断输入是否为空
alert('请填写完整信息');
return;
}
if (!validateEmail(emailValue)) { // 判断邮箱格式是否正确
alert('邮箱格式不正确');
return;
}
// 表单验证通过,可以进行提交操作
submitForm(nameValue, emailValue);
});
function validateEmail(email) {
const re = /\S+@\S+\.\S+/;
return re.test(email);
}
function submitForm(name, email) {
// 在此处进行表单提交操作
}
```
这段代码实现了以下功能:
1. 阻止表单默认提交行为。
2. 获取输入框中的值,并判断是否为空。
3. 判断邮箱格式是否正确。
4. 如果表单验证通过,则调用 `submitForm` 函数进行提交操作。
你可以根据自己的需求修改代码,实现更复杂的表单交互功能。