117 lines
3.9 KiB
HTML
117 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zn-ch">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>课程信息录入</title>
|
|
<link rel="stylesheet" href="../css/course.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<form action="" method="post" class="course">
|
|
<table class="input-form ">
|
|
<thead>
|
|
<tr>
|
|
<td class="td_header" colspan="3">课程信息录入，<span class="star">*</span></td>
|
|
</tr>
|
|
</thead>
|
|
<tr>
|
|
<td><label for="name-input">名称</label></td>
|
|
<td>
|
|
<input name="cname" type="text" id="name-input">
|
|
</td>
|
|
<td>
|
|
<span class="star">*</span>5~20位字符
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="type-input">性质</label></td>
|
|
<td>
|
|
<select name="ctype" id="type-input">
|
|
<option value="专业必修课">专业必修课</option>
|
|
<option value="专业选修课">专业选修课</option>
|
|
<option value="通识必修课">通识必修课</option>
|
|
<option value="通识选修课">通识选修课</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<span class="star">*</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="score-input">学分</label></td>
|
|
<td>
|
|
<input name="cscore" type="number" id="score-input">
|
|
</td>
|
|
<td>
|
|
<span class="star">*</span>数值
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="year-input">年份</label></td>
|
|
<td>
|
|
<input name="cyear" type="text" id="year-input">
|
|
</td>
|
|
<td>
|
|
<span class="star">*</span>4位数年份
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>开设专业</td>
|
|
<td>
|
|
<input name="cmajor" value="软件工程" type="radio" id="major-input-1">
|
|
<label for="major-input-1">软件工程</label>
|
|
<input name="cmajor" value="空间信息" type="radio" id="major-input-2">
|
|
<label for="major-input-2">空间信息</label>
|
|
</td>
|
|
<td>
|
|
<span class="star">*</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="note-input">备注</label></td>
|
|
<td>
|
|
<textarea rows="5" name="cnote" id="note-input"></textarea>
|
|
</td>
|
|
<td>
|
|
200个字符以内
|
|
</td>
|
|
</tr>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="3">
|
|
<input type="submit">
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
const form = document.querySelector('.course');
|
|
|
|
form.addEventListener('submit', function (e) {
|
|
const cyearInput = document.getElementById('year-input');
|
|
if (!/^20\d{2}$/.test(cyearInput.value)) {
|
|
e.preventDefault();
|
|
alert('请输入合法的四位年份');
|
|
return;
|
|
}
|
|
|
|
const cnameInput = document.getElementById('name-input');
|
|
console.log(cnameInput.value.length)
|
|
console.log(cnameInput.value)
|
|
if (cnameInput.value.length < 5 || cnameInput.value.length > 20){
|
|
e.preventDefault();
|
|
alert('请输入5~20位字符');
|
|
return
|
|
}
|
|
const cnoteInput = document.getElementById('note-input');
|
|
if (cnameInput.value.length > 200){
|
|
e.preventDefault();
|
|
alert('备注超长');
|
|
}
|
|
alert('正常提交');
|
|
});
|
|
</script>
|
|
</html> |