在编程时，有时会使用web服务器控件的自定义属性。例如，TextBox控件中没有IsNotNull属性，但是我们可以自己添加一个IsNotNull属性，从而作为一个标记来方便我们编写程序。
js脚本
document.addEventListener('DOMContentLoaded', function() {
const validateBtn = document.getElementById('validate-btn');
const resultDiv = document.getElementById('result');
// 为输入框添加实时验证
document.querySelectorAll('input[type="text"]').forEach(input => {
input.addEventListener('blur', function() {
validateField(this);
});
input.addEventListener('input', function() {
// 输入时隐藏错误信息
const errorElement = document.getElementById(`${this.id}-error`);
errorElement.style.display = 'none';
});
});
// 验证按钮点击事件
validateBtn.addEventListener('click', function() {
const isValid = validateForm();
if (isValid) {
resultDiv.className = 'validation-result success';
resultDiv.innerHTML = '验证成功！ 所有字段均通过验证。';
resultDiv.style.display = 'block';
} else {
resultDiv.className = 'validation-result failure';
resultDiv.innerHTML = '验证失败！ 请检查表单中的错误。';
resultDiv.style.display = 'block';
}
});
// 验证单个字段
function validateField(field) {
// 检查必填字段
if (field.getAttribute('data-isnotnull') === 'true') {
if (!field.value.trim()) {
showError(field, true);
return false;
} else {
showError(field, false);
}
}
// 检查邮箱格式
if (field.getAttribute('data-validate') === 'email' && field.value.trim()) {
const emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/;
if (!emailPattern.test(field.value)) {
showError(field, true);
return false;
} else {
showError(field, false);
}
}
// 检查手机格式
if (field.getAttribute('data-format') === 'phone' && field.value.trim()) {
const phonePattern = /^1[3-9]d{9}$/;
if (!phonePattern.test(field.value)) {
showError(field, true);
return false;
} else {
showError(field, false);
}
}
return true;
}
// 显示或隐藏错误信息
function showError(field, show) {
const errorElement = document.getElementById(`${field.id}-error`);
if (show) {
errorElement.style.display = 'block';
field.style.borderColor = '#e74c3c';
} else {
errorElement.style.display = 'none';
field.style.borderColor = '#ddd';
}
}
// 验证整个表单
function validateForm() {
let isValid = true;
document.querySelectorAll('input[type="text"]').forEach(field => {
if (!validateField(field)) {
isValid = false;
}
});
return isValid;
}
});html标签
css样式
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: white;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
padding: 30px;
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 20px;
font-size: 28px;
}
.description {
text-align: center;
color: #7f8c8d;
margin-bottom: 30px;
line-height: 1.6;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #34495e;
}
input[type="text"] {
width: 100%;
padding: 12px 15px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s;
}
input[type="text"]:focus {
border-color: #3498db;
outline: none;
}
.required::after {
content: " *";
color: #e74c3c;
}
.error {
color: #e74c3c;
font-size: 14px;
margin-top: 5px;
display: none;
}
button {
background: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
width: 100%;
transition: background 0.3s;
}
button:hover {
background: #2980b9;
}
.validation-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
display: none;
}
.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.failure {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.custom-property {
background: #f8f9fa;
padding: 15px;
border-radius: 6px;
margin-top: 20px;
font-family: monospace;
white-space: pre-wrap;
word-break: break-all;
}