Javascript的问题请问checkbox，radio，select的内容为必填如何实现

田磊阳

本帖最后由 dongyangzhang 于 2013-4-16 18:57 编辑

<!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>

复制代码

前面javascript的实现是参考了毕老师的视频做出来的，最后一问其他项为必填实在有点困难，求解。面试题已提交。

黄玉昆 · 黄玉昆

恕我孤陋寡闻，我怎么没学到这些知识呢？这是安卓方向的知识吗？请问楼主在哪看的视频啊，给我个地址吧，有时间我也好好学习学习，谢谢

dongyangzhang · dongyangzhang

黄玉昆发表于 2013-4-15 19:55
恕我孤陋寡闻，我怎么没学到这些知识呢？这是安卓方向的知识吗？请问楼主在哪看的视频啊，给我个地址吧，有 ...

http://edu.csdn.net/news/2012822/9fa13987df36.shtml是这个网址，您可以打开看看，我当时就是在这里下载的。

dongyangzhang · dongyangzhang

视频地址有截图可以看看

dongyangzhang · dongyangzhang

黄玉昆发表于 2013-4-15 19:55
恕我孤陋寡闻，我怎么没学到这些知识呢？这是安卓方向的知识吗？请问楼主在哪看的视频啊，给我个地址吧，有 ...

这个是我基础测试题的最后一道题。

JavaUtil · JavaUtil

本帖最后由 JavaUtil 于 2013-4-15 21:44 编辑

1、你可以和前面几个例子一样插入相应的<div>标签，写入你要显示的内容。
2、分别写入他们相应事件的响应方法，如：checkbox、radio的onclick事件的相应事件方法；seleck的onchange事件的响应方法。
3、根据响应方法判断他们相应属性。如：checkbox、radio的checked，seleck的option对象的value值。
4、属性不是你想要的值，可以设置div的display属性显示相应显示区的内容。并使方法返回false；
5、设置form标签的onSubmit事件的相应方法。可以return前面几个控件的boolean值之和来控制表单是否提交。

因为现在用的是别人的电脑，没装相关软件，不能写代码，所以就只能这么说说，不好意思。

dongyangzhang · dongyangzhang

JavaUtil 发表于 2013-4-15 21:42
1、你可以和前面几个例子一样插入相应的标签，写入你要显示的内容。
2、分别写入他们相应事件的响应方法， ...

txt格式的也可以吧？

JavaUtil · JavaUtil

dongyangzhang 发表于 2013-4-15 22:16
txt格式的也可以吧？

如果是textarea之类的标签，你可以写onfocus()事件的相应方法，即失去焦点事件的相应方法，然后判断它的value属性是否为空来判断是否显示div内容，并返回true或false。

dongyangzhang · dongyangzhang

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;
}
}
}

复制代码

今天在百度上找到了解决方案，根据自己的理解自己加的注释，不过还是没有把checkbox和radio分开来提醒

帐号		自动登录	找回密码
密码			加入黑马

Javascript的问题请问checkbox，radio，select的内容为必填如何实现

评分

8 个回复

评分

黑马骑士勋章