用Javascript完成表单验证,定时器的使用的代码
时间: 2024-05-10 08:19:55 浏览: 18
好的,以下是使用Javascript完成表单验证及定时器的使用代码的示例:
```javascript
// 获取表单元素
const form = document.querySelector('form');
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
const confirmPasswordInput = document.querySelector('#confirm-password');
// 设置定时器
let timer = null;
// 验证函数
function validateForm() {
// 获取输入框的值
const username = usernameInput.value;
const password = passwordInput.value;
const confirmPassword = confirmPasswordInput.value;
// 判断输入框是否为空
if (!username) {
alert('用户名不能为空');
return false;
}
if (!password) {
alert('密码不能为空');
return false;
}
if (!confirmPassword) {
alert('确认密码不能为空');
return false;
}
// 判断密码是否一致
if (password !== confirmPassword) {
alert('两次输入的密码不一致');
return false;
}
// 表单验证通过
alert('表单验证通过');
return true;
}
// 给表单元素绑定提交事件
form.addEventListener('submit', function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 清除定时器
clearInterval(timer);
// 调用验证函数
validateForm();
}, false);
// 给密码输入框绑定输入事件
passwordInput.addEventListener('input', function(event) {
// 清除定时器,避免连续请求
clearInterval(timer);
// 设置定时器,延迟500毫秒请求
timer = setTimeout(function() {
// 发送请求
fetch('/validate-password', {
method: 'POST',
body: JSON.stringify({ password: event.target.value }),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(response) {
return response.json();
})
.then(function(data) {
// 根据返回结果给出提示
if (data.valid) {
alert('密码强度合格');
} else {
alert('密码过于简单');
}
})
.catch(function(error) {
console.error(error);
alert('请求失败,请重试');
});
}, 500);
}, false);
```
以上代码可以完成基本的表单验证和密码强度检测功能。需要注意的是,该示例中的 '/validate-password' 接口需要自行实现。