js自学网站推荐:http://www.51zxw.net/study.asp?vip=4857021
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
margin:30px auto;
border:2px solid orange;
}
td{
height:40px;line-height:40px;
padding: 5px;width:200px;
background: rgba(100,50,10,0.3);
text-align: right;
font-size: 18px;
}
td:first-child{
width:150px;
}
.lasttd{
text-align: center;
}
.sextd{
text-align: left;
}
select,input{
width: 200px;
height: 40px;
font-size: 18px;
}
[type=radio]{
width: 18px;height: 18px;
outline: none;
}
[type=submit],[type=reset]{
width:100px;height: 36px;
outline:none;border-radius: 18px;
}
</style>
</head>
<body>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="st1"></td>
</tr>
<tr>
<td>联系电话:</td>
<td><input type="number" id="st2"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="st3"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" id="st4" ></td>
</tr>
<tr>
<td>性别:</td>
<td class="sextd">
<input type="radio" id="sex1" name="sex" checked>男
<input type="radio" id="sex2" name="sex">女
</td>
</tr>
<tr>
<td>学历:</td>
<td>
<select name="select" id="select">
<option value="高中">高中</option>
<option value="高中">大专</option>
<option value="高中">本科</option>
<option value="高中">本科及以上</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" class="lasttd">
<input type="submit" value="提交" οnclick="check()">
<input type="reset" value="重置" οnclick="reset()">
</td>
</tr>
</table>
<script>
/*自定义通过Id来获取元素的函数 */
function $(id) {
return document.getElementById(id)
}
/*提交按钮:提交前检测 */
function check() {
// alert("111")
//检测用户名是否为空
var st1 = $("st1").value;
if(st1 == ""){
alert("用户名不得为空!");
return false ;
};
//检测手机号是否为11位数字
var st2 = $("st2").value;
if(st2.length!=11 || st2.substr(0,1)!=1 ){
alert("手机号格式不正确!");
return false ;
};
//检测密码是否为空
var st3 = $("st3").value ;
if(st3 ==""){
alert("密码不得为空!");
return false ;
}
//检测密码是否一致
var st4 = $("st4").value ;
if(st3!=st4){
alert("密码输入不一致!");
return false ;
}
var sex = $("sex1").checked ? "男":"女";
var select = $("select").value ;
//输出提交内容
var info = "";
info+="\n 用户名:"+ st1;
info+="\n 联系方式:"+ st2;
info+="\n 密码:"+ st4;
info+="\n 性别:"+ sex;
info+="\n 学历:"+ select;
alert(info);
st1=st2=st3=st4=sex=select=info=null; //及时解除不再使用的变量引用
}
/*重置按钮 */
function reset() {
$("st1").value = $("st2").value =$("st3").value=$("st4").value="";
$("sex1").checked = true;
$("select").value = "高中";
return false ;
}
</script>
</body>
</html>