js使用Form表单实现Web页面信息交互,要求浏览者接受商城协议,如果不接受协议,单击“提交”时弹出警示框,要求用户勾选接受协议;当用户勾选协议后,如果单击“复位”,弹出确认框,确认是否清除输入的信息
时间: 2024-01-03 17:03:32 浏览: 22
针对你的问题,我可以提供以下代码实现:
HTML代码:
```html
<form>
<label>
<input type="checkbox" id="agree" required>
我已阅读并接受商城协议
</label>
<br>
<label>
用户名:
<input type="text" name="username">
</label>
<br>
<label>
密码:
<input type="password" name="password">
</label>
<br>
<button type="submit">提交</button>
<button type="reset">复位</button>
</form>
```
JavaScript代码:
```javascript
const form = document.querySelector('form');
const agree = document.getElementById('agree');
form.addEventListener('submit', (event) => {
if (!agree.checked) {
event.preventDefault();
alert('请勾选接受商城协议');
}
});
form.addEventListener('reset', (event) => {
if (confirm('确认清除输入的信息吗?')) {
// 清除输入的信息
} else {
event.preventDefault();
}
});
```
这段代码中,使用了HTML5的`required`属性来确保必须勾选商城协议才能提交表单。在提交表单时,如果商城协议未勾选,则阻止表单提交并弹出警示框。在复位表单时,如果用户确认清除输入的信息,则清除输入的信息;否则,阻止表单复位。