用jQuery写一个考试报名表单
时间: 2024-05-10 19:15:16 浏览: 6
好的,下面是一个基本的考试报名表单,使用jQuery进行表单验证:
HTML代码:
```
<form id="exam-form" action="#" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="age">年龄:</label>
<input type="number" id="age" name="age" required>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone" required>
<label for="exam-date">考试日期:</label>
<input type="date" id="exam-date" name="exam-date" required>
<label for="exam-time">考试时间:</label>
<input type="time" id="exam-time" name="exam-time" required>
<button type="submit" id="submit-btn">提交</button>
</form>
```
jQuery代码:
```
$(document).ready(function() {
// 表单验证
$('#exam-form').submit(function(event) {
event.preventDefault(); // 防止表单自动提交
// 获取表单数据
var name = $('#name').val();
var age = $('#age').val();
var email = $('#email').val();
var phone = $('#phone').val();
var examDate = $('#exam-date').val();
var examTime = $('#exam-time').val();
// 验证表单数据
if (name == '') {
alert('请输入姓名');
return false;
}
if (age == '') {
alert('请输入年龄');
return false;
}
if (email == '') {
alert('请输入邮箱');
return false;
}
if (phone == '') {
alert('请输入电话');
return false;
}
if (examDate == '') {
alert('请选择考试日期');
return false;
}
if (examTime == '') {
alert('请选择考试时间');
return false;
}
// 提交表单
alert('提交成功!');
$('#exam-form')[0].reset();
});
});
```
这段代码会防止表单自动提交,并且在提交之前进行表单验证。如果表单验证通过,会弹出一个提示框,然后重置表单。如果表单验证不通过,会弹出相应的提示框。