221 lines
9.8 KiB
JavaScript
221 lines
9.8 KiB
JavaScript
|
||
const event_list = document.querySelector('.event-list');
|
||
const event_item = event_list.querySelectorAll('.event-item');
|
||
const form_area = document.querySelector('.form-area');
|
||
// const al = Array.from(event_item);
|
||
// console.log(al[0]);
|
||
|
||
// console.log(event_item);
|
||
|
||
|
||
event_item.forEach(item=>{
|
||
// 表单默认
|
||
form_area.innerHTML = `
|
||
<h3 class="form-title" id="formTitle">请在左侧选择报名赛事</h3>
|
||
`;
|
||
|
||
item.addEventListener('click',function(){
|
||
event_item.forEach(item=>item.classList.remove('active'));
|
||
// 左侧列表选中
|
||
item.classList.add('active');
|
||
// console.log(item.innerHTML);
|
||
form_area.innerHTML = '';
|
||
// console.log(item.getAttribute('data-event'));
|
||
const type = item.getAttribute('data-event');
|
||
if(type == 'ai-competition'){
|
||
form_area.innerHTML =
|
||
`
|
||
<h3 class="form-title" id="formTitle">${item.innerHTML} - 报名表单</h3>
|
||
<div class="form-content active" id="ai-competition">
|
||
<div class="form-item">
|
||
<label for="ai-name">参赛人姓名：</label>
|
||
<input type="text" id="ai-name" placeholder="请输入姓名" required>
|
||
</div>
|
||
<div class="form-item">
|
||
<label for="ai-phone">联系电话：</label>
|
||
<input type="tel" id="ai-phone" placeholder="请输入11位手机号" required>
|
||
</div>
|
||
<div class="form-item">
|
||
<label for="ai-team">团队名称：</label>
|
||
<input type="text" id="ai-team" placeholder="个人参赛请填姓名">
|
||
</div>
|
||
<div class="form-item">
|
||
<label for="ai-direction">开发方向：</label>
|
||
<select id="ai-direction" required>
|
||
<option value="">请选择</option>
|
||
<option value="chatbot">智能问答机器人</option>
|
||
<option value="image">AI图片生成</option>
|
||
<option value="voice">语音识别/合成</option>
|
||
</select>
|
||
</div>
|
||
<button class="submit-btn" onclick="submitForm('${item.innerHTML}')">提交报名</button>
|
||
</div>
|
||
`;
|
||
}else
|
||
if(type=='3d-model'){
|
||
// item.classList.add('active');
|
||
// console.log('3d');
|
||
|
||
// form_area.innerHTML = '';
|
||
// console.log(1);
|
||
|
||
form_area.innerHTML =
|
||
`
|
||
<h3 class="form-title" id="formTitle">${item.innerHTML} - 报名表单</h3>
|
||
<div class="form-content" id="3d-model">
|
||
<div class="form-item">
|
||
<label for="3d-name">参赛人姓名：</label>
|
||
<input type="text" id="3d-name" placeholder="请输入姓名" required>
|
||
</div>
|
||
<div class="form-item">
|
||
<label for="3d-phone">联系电话：</label>
|
||
<input type="tel" id="3d-phone" placeholder="请输入11位手机号" required>
|
||
</div>
|
||
<div class="form-item">
|
||
<label for="3d-model-type">建模类型：</label>
|
||
<select id="3d-model-type" required>
|
||
<option value="">请选择</option>
|
||
<option value="industrial">工业模型</option>
|
||
<option value="architectural">建筑模型</option>
|
||
<option value="character">人物/场景模型</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button class="submit-btn" onclick="submitForm('${item.innerHTML}')">提交报名</button>
|
||
</div>`;
|
||
|
||
}else if(type=='hardware-dev'){
|
||
|
||
form_area.innerHTML =
|
||
`
|
||
<h3 class="form-title" id="formTitle">${item.innerHTML} - 报名表单</h3>
|
||
<div class="form-content" id="hardware-dev">
|
||
<div class="form-item">
|
||
<label for="hardware-name">参赛人姓名：</label>
|
||
<input type="text" id="hardware-name" placeholder="请输入姓名" required>
|
||
</div>
|
||
<div class="form-item">
|
||
<label for="hardware-phone">联系电话：</label>
|
||
<input type="tel" id="hardware-phone" placeholder="请输入11位手机号" required>
|
||
</div>
|
||
<div class="form-item">
|
||
<label for="hardware-type">硬件类型：</label>
|
||
<select id="hardware-type" required>
|
||
<option value="">请选择</option>
|
||
<option value="embedded">嵌入式设备</option>
|
||
<option value="iot">物联网设备</option>
|
||
<option value="sensor">传感器开发</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-item">
|
||
<label for="hardware-skill">技术栈：</label>
|
||
<input type="text" id="hardware-skill" placeholder="如：STM32、Arduino、Python">
|
||
</div>
|
||
|
||
<button class="submit-btn" onclick="submitForm('${item.innerHTML}')">提交报名</button>
|
||
</div>
|
||
|
||
`;
|
||
}else if(type=='overseas'){
|
||
form_area.innerHTML=
|
||
`
|
||
<h3 class="form-title" id="formTitle">${item.innerHTML} - 报名表单</h3>
|
||
<div class="form-content" id="overseas">
|
||
<div class="form-item">
|
||
<label for="overseas-name">参赛人姓名：</label>
|
||
<input type="text" id="overseas-name" placeholder="请输入姓名" required>
|
||
</div>
|
||
<div class="form-item">
|
||
<label for="overseas-phone">联系电话：</label>
|
||
<input type="tel" id="overseas-phone" placeholder="请输入11位手机号" required>
|
||
</div>
|
||
<div class="form-item">
|
||
<label for="overseas-region">对接地区：</label>
|
||
<select id="overseas-region" required>
|
||
<option value="">请选择</option>
|
||
<option value="japan">日本</option>
|
||
<option value="usa">美国</option>
|
||
<option value="europe">欧洲</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-item">
|
||
<label for="overseas-lang">语言能力：</label>
|
||
<input type="text" id="overseas-lang" placeholder="如：日语N2、英语CET6">
|
||
</div>
|
||
<button class="submit-btn" onclick="submitForm('${item.innerHTML}')">提交报名</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
|
||
// form_area.innerHTML = form_area.innerHTML+`1`;
|
||
});
|
||
|
||
});
|
||
|
||
function submitForm(eventName) {
|
||
console.log(eventName);
|
||
|
||
const activeForm = document.querySelector('.form-content');
|
||
console.log(activeForm);
|
||
|
||
if (!activeForm) return;
|
||
const nameInput = activeForm.querySelector('input[type="text"]');
|
||
// console.log("1:"+nameInput.value);
|
||
|
||
const phoneInput = activeForm.querySelector('input[type="tel"]');
|
||
const nameItem = nameInput.closest('.form-item');
|
||
const phoneItem = phoneInput.closest('.form-item');
|
||
|
||
const oldNameError = nameItem.querySelector('span[style*="color: red"]');
|
||
const oldPhoneError = phoneItem.querySelector('span[style*="color: red"]');
|
||
if (oldNameError) nameItem.removeChild(oldNameError);
|
||
if (oldPhoneError) phoneItem.removeChild(oldPhoneError);
|
||
|
||
// 1. 姓名验证
|
||
if (!nameInput.value.trim()) {
|
||
console.log(1);
|
||
|
||
const pay_name_error = document.createElement('span');
|
||
pay_name_error.style.color = 'red';
|
||
pay_name_error.style.fontSize = '12px';
|
||
pay_name_error.style.marginTop = '4px';
|
||
pay_name_error.textContent = '请输入姓名';
|
||
nameItem.appendChild(pay_name_error);
|
||
|
||
// 动态输入
|
||
nameInput.addEventListener('input', function removeNameError() {
|
||
if (nameInput.value.trim()) {
|
||
nameItem.removeChild(pay_name_error);
|
||
nameInput.removeEventListener('input', removeNameError); // 移除一次性监听
|
||
}
|
||
});
|
||
nameInput.focus();
|
||
return;
|
||
}
|
||
|
||
// 2. 手机号验证
|
||
const phoneReg = /^1[3-9]\d{9}$/;
|
||
if (!phoneReg.test(phoneInput.value.trim())) {
|
||
const pay_phone_error = document.createElement('span');
|
||
pay_phone_error.style.color = 'red';
|
||
pay_phone_error.style.fontSize = '12px';
|
||
pay_phone_error.style.marginTop = '4px';
|
||
pay_phone_error.textContent = '请输入正确的联系方式';
|
||
phoneItem.appendChild(pay_phone_error);
|
||
|
||
// 动态输入
|
||
phoneInput.addEventListener('input', function removePhoneError() {
|
||
if (phoneReg.test(phoneInput.value.trim())) {
|
||
phoneItem.removeChild(pay_phone_error);
|
||
phoneInput.removeEventListener('input', removePhoneError); // 移除一次性监听
|
||
}
|
||
});
|
||
phoneInput.focus();
|
||
return;
|
||
}
|
||
|
||
alert(`${eventName}报名成功！我们会尽快联系你。`);
|
||
activeForm.reset();
|
||
}
|