html+css+js身份证验证代码
时间: 2023-11-12 15:24:40 浏览: 32
<!DOCTYPE html>
<html>
<head>
<title>ID Card Verification</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
width: 400px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"], input[type="number"] {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
margin-bottom: 20px;
box-sizing: border-box;
font-size: 16px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
.error {
color: red;
font-size: 14px;
margin-top: -10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>ID Card Verification</h1>
<form>
<label for="idNumber">ID Number:</label>
<input type="text" id="idNumber" name="idNumber" placeholder="Enter your ID number" required>
<span id="idNumberError" class="error"></span>
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName" placeholder="Enter your full name" required>
<span id="fullNameError" class="error"></span>
<label for="birthDate">Birth Date:</label>
<input type="date" id="birthDate" name="birthDate" required>
<span id="birthDateError" class="error"></span>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<span id="genderError" class="error"></span>
<input type="submit" value="Verify">
</form>
<script>
const idNumber = document.getElementById('idNumber');
const fullName = document.getElementById('fullName');
const birthDate = document.getElementById('birthDate');
const male = document.getElementById('male');
const female = document.getElementById('female');
const idNumberError = document.getElementById('idNumberError');
const fullNameError = document.getElementById('fullNameError');
const birthDateError = document.getElementById('birthDateError');
const genderError = document.getElementById('genderError');
function validateIdNumber() {
const idNumberValue = idNumber.value.trim();
if (idNumberValue === '') {
idNumberError.textContent = 'ID number is required';
return false;
} else if (idNumberValue.length !== 18) {
idNumberError.textContent = 'ID number must be 18 characters long';
return false;
} else if (!/^\d{17}[\dX]$/.test(idNumberValue)) {
idNumberError.textContent = 'ID number is invalid';
return false;
} else {
idNumberError.textContent = '';
return true;
}
}
function validateFullName() {
const fullNameValue = fullName.value.trim();
if (fullNameValue === '') {
fullNameError.textContent = 'Full name is required';
return false;
} else if (!/^[a-zA-Z ]+$/.test(fullNameValue)) {
fullNameError.textContent = 'Full name must contain only letters';
return false;
} else {
fullNameError.textContent = '';
return true;
}
}
function validateBirthDate() {
const birthDateValue = birthDate.value;
const today = new Date();
const birthYear = new Date(birthDateValue).getFullYear();
if (birthDateValue === '') {
birthDateError.textContent = 'Birth date is required';
return false;
} else if (birthYear > today.getFullYear() || birthYear < today.getFullYear() - 150) {
birthDateError.textContent = 'Birth date is invalid';
return false;
} else {
birthDateError.textContent = '';
return true;
}
}
function validateGender() {
if (!male.checked && !female.checked) {
genderError.textContent = 'Gender is required';
return false;
} else {
genderError.textContent = '';
return true;
}
}
function validateForm(e) {
e.preventDefault();
let isIdNumberValid = validateIdNumber();
let isFullNameValid = validateFullName();
let isBirthDateValid = validateBirthDate();
let isGenderValid = validateGender();
if (isIdNumberValid && isFullNameValid && isBirthDateValid && isGenderValid) {
alert('Verification successful');
document.getElementById('idNumber').value = '';
document.getElementById('fullName').value = '';
document.getElementById('birthDate').value = '';
document.getElementById('male').checked = false;
document.getElementById('female').checked = false;
}
}
document.querySelector('form').addEventListener('submit', validateForm);
</script>
</body>
</html>