Javascript的问题请问checkbox，radio，select的内容为必填如何实现 - 黑马程序员技术交流社区

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 第十题：编写HTML注册表单, 需要字段: 用户名, 密码, 确认密码, 性别(单选), 城市(下拉列表), 兴趣爱好(多选), 个人简介(文本域)。
然后使用JavaScript验证这个HTML表单，要求：
1、用户名: 必须是字母数字或下划线, 不能以数字开头.
2、密码: 6-16位字母数字下划线.
3、确认密码: 和密码一致.
4、其他项为必填.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册表单</title>
<style type="text/css">
.errorinfo{
color: red;
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
//当加载页面的时候，使用户输入框获得焦点
document.forms[0].username.focus();
}
//检测输入的文本是否符合标准
function check(inputNode,regex,divId){
//通过divId获得div的节点
var divNode=document.getElementById(divId);
//判断输入文本的值是否符合规定的正则表达式
if(regex.test(inputNode.value)){
//如果符合则把提示错误隐藏
divNode.style.display="none";
}else{
//如果不符合则提示用户
divNode.style.display="block";
}
}
//校验用户名函数
function checkUsername(usernameNode){
//定义正则表达式规则：必须是字母数字或下划线, 不能以数字开头.
var regex=/^[a-zA-Z_]\w{0,}$/;
//调用check函数
check(usernameNode,regex,"usernamediv");
}
//校验用户输入密码函数
function checkPwd(pwdNode){
//定义正则表达式规则：6-16位字母数字下划线.
var regex=/^\w{6,16}$/;
//调用check函数
check(pwdNode,regex,"pwddiv");
}
//校验用户输入的确认密码函数
function checkRpwd(rpwdNode){
//获取用户确认密码的值为value1
var value1=rpwdNode.value;
//通过id获取用户输入密码的值value2
var value2=document.getElementById("Pwd").value;
if(value1==value2){
//如果密码和确认密码的值一样，则不提示用户
document.getElementById("rpwddiv").style.display="none";
}else{
//用户两次输入的密码值不一样，提示用户
document.getElementById("rpwddiv").style.display="block";
}
}
</script>
</head>
<body>
<center>
<form name="form">
<table border="1" cellspacing="0" >
<tr>
<td>用户名：</td>
<td><input type="text" name="username">
<div class="errorinfo" id="usernamediv">用户名输入不规范.</div>
<div>用户名必须是字母数字或下划线, 不能以数字开头.</div>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd" id="Pwd">
<div class="errorinfo" id="pwddiv">密码输入不合规定</div>
<div>密码必须是6-16位字母数字下划线组成.</div>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="rpwd">
<div class="errorinfo" id="rpwddiv">两次必须密码一致.</div>
<div>保证两次输入的密码一致</div>
</td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="nv">女
<input type="radio" name="sex" value="nan">男
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select name="city">
<option value="none">城市</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="zhengzhou">郑州</option>
</select>
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="pingpang">乒乓球
<input type="checkbox" name="hobby" value="music">音乐
</td>
</tr>
<tr>
<td>个人简介：</td>
<td><textarea rows="6" cols="16" name="gerenjianjie"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
<p> </p>

复制代码

function checkForm(form)
{
//定义去除空格的方法
String.prototype.trim = function()
{
return this.replace(/(^\s+)|(\s+$)/g, "");
}
//用于存放checkbox radio
var arr = {};
//遍历form表单的所有元素
for(var i=0; i<form.elements.length; i++)
{
//获取表单的元素付给e
var e = form.elements[i];
//判断表单元素的属性名
switch(e.tagName)
{
//判断TEXTAREA是否为空
case "TEXTAREA" :
if(!e.disabled && e.value.trim()=="" && e.clientHeight>0)
{
alert("个人简历不能为空");
e.focus();
return;
} break;
//判断选择下拉框内容是否为空
case "SELECT" :
if(!e.disabled && e.value.trim()=="" && e.clientHeight>0)
{
alert("所选城市不能为空");
e.focus();
return;
} break;
//判断checkbox和radio是否为空
case "INPUT" :
//判断元素是否存在，类型是否是隐藏
if(!e.disabled && e.type!="hidden" && e.clientHeight>0)
{
//如果checkbox,radio存在
if("checkbox,radio".indexOf(e.type)>-1)
{
//如果checkbox,radio的值为undefined则执行下一步
if(typeof arr[e.name]=="undefined")
{
//把checkbox,radio的name付给a
var a = document.getElementsByName(e.name);
//遍历checkbox,radio的所有name的value值
for(var k=0; k<a.length; k++)
{
if(a[k].checked)
{
arr[e.name] = a[k].value;
break;
}
}
//如果所有checkbox或radio的值为undefined则提示
if(typeof arr[e.name]=="undefined")
{
alert("性别或者兴趣爱好不能为空");
e.focus();
return;
}
}
}
} break;
}
}
}

复制代码