写一个学生注册页面,包括学号,姓名,性别,手机号,下面有保存按钮,点击后对表单输入框进行验证,学号,姓名,性别为必填,手机号必须是11位数字
时间: 2024-06-11 17:10:24 浏览: 12
<!DOCTYPE html>
<html>
<head>
<title>学生注册页面</title>
<meta charset="utf-8">
<script type="text/javascript">
function checkForm(){
var stuNo = document.getElementById("stuNo").value;
var name = document.getElementById("name").value;
var gender = document.getElementsByName("gender");
var phone = document.getElementById("phone").value;
var flag = true;
//验证学号
if(stuNo == ""){
alert("请输入学号");
flag = false;
}
//验证姓名
if(name == ""){
alert("请输入姓名");
flag = false;
}
//验证性别
var genderChecked = false;
for(var i=0; i<gender.length; i++){
if(gender[i].checked){
genderChecked = true;
}
}
if(!genderChecked){
alert("请选择性别");
flag = false;
}
//验证手机号
if(phone == ""){
alert("请输入手机号");
flag = false;
}else if(!/^\d{11}$/.test(phone)){
alert("手机号必须是11位数字");
flag = false;
}
if(flag){
alert("提交成功");
//此处可提交表单数据到后台
}
return flag;
}
</script>
</head>
<body>
<h1>学生注册页面</h1>
<form onsubmit="return checkForm();">
<label>学号:</label>
<input type="text" name="stuNo" id="stuNo"><br><br>
<label>姓名:</label>
<input type="text" name="name" id="name"><br><br>
<label>性别:</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女<br><br>
<label>手机号:</label>
<input type="text" name="phone" id="phone"><br><br>
<input type="submit" value="保存">
</form>
</body>
</html>
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)