代码如下：
<!DOCTYPE html>
<meta content="text/html;charset=utf-8">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
*{
padding: 0px;
margin: 0px;
}
h1{
text-align: center
}
.wrap{
width: 450px;
margin: 0 auto;
}
ul{
list-style-type: none;
margin-top: 40px;
}
li{
margin-top: 20px;
}
.need{
color: red;
}
.tb{
margin-left: 85px;
}
td{
width: 110px;
}
.ta{
margin-left: 85px;
}
</style>
<body>
<h1>信息登录</h1>
<div class="wrap">
<form action="info.html" method="post" onsubmit="return check()">
<ul>
<li><span class="need" id="ndName">*</span> 姓 名： <input type="text" name="username" id="username"> <span id="usermsg"></span></li>
<li><span class="need" id="ndPhone">*</span> 电 话： <input type="text" name="phonenumber" id="phonenumber"> <span id="phonemsg"></span></li>
<li><span class="need" id="ndSex">*</span> 性 别：
<input type="radio" value="男" name="sex" checked="checked">男
<input type="radio" value="女" name="sex">女
</li>
<li>
<span class="need" id="ndSkills">*</span> 技 能：
<table class="tb">
<tr>
<td><input type="checkbox" name="skills" value="java">Java</td>
<td><input type="checkbox" name="skills" value="jsp">Jsp</td>
<td><input type="checkbox" name="skills" value="js">Js</td>
</tr>
<tr>
<td><input type="checkbox" name="skills" value="php">PHP</td>
<td><input type="checkbox" name="skills" value="net">VB.NET</td>
<td><input type="checkbox" name="skills" value="cobol">Cobol</td>
</tr>
<tr>
<td><input type="checkbox" name="skills" value="other">其他</td>
<td><input type="text" id="othermsg"></td>
<td><span id="otherinfo"></span></td>
</tr>
</table>
</li>
<li>
最高学历：
<select name="xueli">
<option value="专科">专 科</option>
<option value="本科">本 科</option>
<option value="硕士">硕 士</option>
<option value="博士">博 士</option>
</select>
</li>
<li>
<div class="left">自我评价：</div>
<textarea name = "info" class="ta" rows="8" cols="25">
</textarea>
</li>
<li>
<input type="submit" value="提交" class="btn btn-primary"">
</li>
</ul>
</form>
</div>
<script>
function check(){
var name = document.getElementById("username").value;
var userMsg = document.getElementById("usermsg");
if(name.length <= 0){
userMsg.innerHTML = "用户名不能为空!";
userMsg.style.color = "red";
return false;
}else{
userMsg.innerHTML = "用户名输入正确!";
userMsg.style.color = "green";
}
var phone = document.getElementById("phonenumber").value;
var phoneMsg = document.getElementById("phonemsg");
var re = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
if(!phone.match(/[\u0000-\u00ff]/g)){
phoneMsg.innerHTML = "请使用半角输入";
phoneMsg.style.color = "red";
return false;
}else if(phone == ""){
phoneMsg.innerHTML = "手机号输入为空";
phoneMsg.style.color = "red";
return false;
}else if(phone.length != 11){
phoneMsg.innerHTML = "请输入11位手机号码！";
phoneMsg.style.color = "red";
return false;
}else if(!re.test(phone)){
phoneMsg.innerHTML = "请输入正确的手机号码!";
phoneMsg.style.color = "red";
return false;
}else{
phoneMsg.innerHTML = "电话号码输入正确!";
phoneMsg.style.color = "green";
}
var checkboxes = document.getElementsByName("skills");
var otherMsg = document.getElementById("othermsg").value;
var otherInfo = document.getElementById("otherinfo");
var str = [];
for(i=0;i<checkboxes.length;i++){
if(checkboxes[i].checked){
str.push(checkboxes[i].value);
}
if(checkboxes[i].checked && checkboxes[i].value == "other" && otherMsg == ""){
otherInfo.innerHTML = "请填写相应的内容";
otherInfo.style.color = "red";
return false;
}
}
if(str.length == 0){
otherInfo.innerHTML = "你还没有选择内容";
otherInfo.style.color = "red";
return false;
}
return true;
}
</script>
</body>
</html>
