用JavaScript写一个登录页面,输入框有三个,分别是手机号,密码与第二次密码,输入框加入失焦事件,失焦的时候判断是否必填,是否合规(手机号是否合规,密码必须是数字和字符组合),判断第一次输入法密码是否与第二次输入的密码一致,有一个按钮提交,提交前再次验证
时间: 2024-03-26 22:35:39 浏览: 12
好的,下面是一个简单的例子,实现了你的要求:
HTML代码:
```
<form>
<div>
<label for="phone">手机号:</label>
<input type="text" id="phone" name="phone">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</div>
<div>
<label for="password-confirm">确认密码:</label>
<input type="password" id="password-confirm" name="password-confirm">
</div>
<button type="submit">提交</button>
</form>
```
JavaScript代码:
```javascript
const form = document.querySelector('form');
const phoneInput = document.getElementById('phone');
const passwordInput = document.getElementById('password');
const passwordConfirmInput = document.getElementById('password-confirm');
// 在失焦事件中触发验证
phoneInput.addEventListener('blur', () => {
const phoneValue = phoneInput.value.trim();
if (!phoneValue) {
showError(phoneInput, '手机号不能为空');
} else if (!isValidPhone(phoneValue)) {
showError(phoneInput, '请输入正确的手机号');
} else {
hideError(phoneInput);
}
});
passwordInput.addEventListener('blur', () => {
const passwordValue = passwordInput.value.trim();
if (!passwordValue) {
showError(passwordInput, '密码不能为空');
} else if (!isValidPassword(passwordValue)) {
showError(passwordInput, '密码必须是数字和字母的组合');
} else {
hideError(passwordInput);
}
});
passwordConfirmInput.addEventListener('blur', () => {
const passwordValue = passwordInput.value.trim();
const passwordConfirmValue = passwordConfirmInput.value.trim();
if (!passwordConfirmValue) {
showError(passwordConfirmInput, '请确认密码');
} else if (passwordValue !== passwordConfirmValue) {
showError(passwordConfirmInput, '两次密码输入不一致');
} else {
hideError(passwordConfirmInput);
}
});
// 在提交事件中触发验证
form.addEventListener('submit', (event) => {
event.preventDefault();
const phoneValue = phoneInput.value.trim();
const passwordValue = passwordInput.value.trim();
const passwordConfirmValue = passwordConfirmInput.value.trim();
if (!phoneValue) {
showError(phoneInput, '手机号不能为空');
} else if (!isValidPhone(phoneValue)) {
showError(phoneInput, '请输入正确的手机号');
} else {
hideError(phoneInput);
}
if (!passwordValue) {
showError(passwordInput, '密码不能为空');
} else if (!isValidPassword(passwordValue)) {
showError(passwordInput, '密码必须是数字和字母的组合');
} else {
hideError(passwordInput);
}
if (!passwordConfirmValue) {
showError(passwordConfirmInput, '请确认密码');
} else if (passwordValue !== passwordConfirmValue) {
showError(passwordConfirmInput, '两次密码输入不一致');
} else {
hideError(passwordConfirmInput);
}
if (isValidPhone(phoneValue) && isValidPassword(passwordValue) && passwordValue === passwordConfirmValue) {
alert('提交成功!');
}
});
// 判断手机号是否合规
function isValidPhone(phone) {
return /^1[3456789]\d{9}$/.test(phone);
}
// 判断密码是否合规
function isValidPassword(password) {
return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(password);
}
// 显示错误信息
function showError(input, message) {
const errorElement = input.nextElementSibling;
if (errorElement && errorElement.className === 'error') {
errorElement.textContent = message;
errorElement.style.display = 'block';
} else {
const newErrorElement = document.createElement('div');
newErrorElement.className = 'error';
newErrorElement.textContent = message;
input.parentNode.insertBefore(newErrorElement, input.nextElementSibling);
}
}
// 隐藏错误信息
function hideError(input) {
const errorElement = input.nextElementSibling;
if (errorElement && errorElement.className === 'error') {
errorElement.style.display = 'none';
}
}
```
在上面的代码中,我们分别给手机号码输入框、密码输入框和确认密码输入框添加了失焦事件,并在失焦时触发相应的验证函数。在验证函数中,我们通过正则表达式判断输入的值是否符合要求,如果不符合则显示错误提示信息,否则隐藏错误提示信息。
在提交事件中,我们也触发了相应的验证函数,并判断是否所有输入框都通过了验证。如果都通过了验证,则弹出提交成功的提示框。