上面代码中的提交按钮点击后默认不提交,通过ajax访问后台
时间: 2023-08-17 21:04:22 浏览: 51
好的,您可以参考下面的代码实现:
```html
<form id="password-form">
<div class="form-group">
<label for="current-password">当前密码</label>
<input type="password" class="form-control" id="current-password" name="current-password" placeholder="请输入当前密码" required>
<div class="invalid-feedback">请输入当前密码</div>
</div>
<div class="form-group">
<label for="new-password">新密码</label>
<input type="password" class="form-control" id="new-password" name="new-password" placeholder="请输入新密码" required oninput="checkNewPassword()">
<span id="new-password-tip" style="color:red;"></span>
</div>
<div class="form-group">
<label for="confirm-password">确认密码</label>
<input type="password" class="form-control" id="confirm-password" name="confirm-password" placeholder="请再次输入新密码" required oninput="checkConfirmPassword()">
<span id="confirm-password-tip" style="color:red;"></span>
</div>
<button type="submit" class="btn btn-primary" id="submit-btn">确认修改</button>
</form>
<script>
function checkNewPassword() {
const password = document.getElementById('new-password').value;
const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,}$/;
const isValid = regex.test(password);
const tip = document.getElementById('new-password-tip');
if (isValid) {
tip.innerHTML = '';
} else {
tip.innerHTML = '密码必须包含大小写字母、数字和特殊字符,并且长度不小于8位';
}
}
function checkConfirmPassword() {
const password = document.getElementById('new-password').value;
const confirmPassword = document.getElementById('confirm-password').value;
const tip = document.getElementById('confirm-password-tip');
if (password === confirmPassword) {
tip.innerHTML = '';
} else {
tip.innerHTML = '两次输入的密码不相同';
}
}
const form = document.getElementById('password-form');
const submitBtn = document.getElementById('submit-btn');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认的表单提交行为
const currentPassword = document.getElementById('current-password').value;
const newPassword = document.getElementById('new-password').value;
const confirmPassword = document.getElementById('confirm-password').value;
// 发送 AJAX 请求到后台
const xhr = new XMLHttpRequest();
xhr.open('POST', '/change-password');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
alert('密码修改成功!');
} else {
alert('密码修改失败,请重试!');
}
}
};
xhr.send(JSON.stringify({
currentPassword: currentPassword,
newPassword: newPassword,
confirmPassword: confirmPassword
}));
// 禁用提交按钮,防止重复提交
submitBtn.disabled = true;
});
</script>
```
该代码使用了AJAX技术,通过XMLHttpRequest对象向后台发送POST请求,请求的URL为`/change-password`。在发送请求之前,先阻止默认的表单提交行为。在接收到后台响应之后,根据响应状态判断密码修改是否成功,并弹出相应的提示信息。同时,在发送请求时禁用提交按钮,防止用户重复提交。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)