<head>
<script type="text/javascript">
var username = document.getElementsByName("username")[0];
var password = document.getElementsByName("password");
var man = document.getElementsByName("man");
var woman = document.getElementsByName("woman");
var football = document.getElementsByName("football");
var basketball = document.getElementsByName("basketball");
var volyball = document.getElementsByName("volyball");
var badminton = document.getElementsByName("badminton");
var instruction = document.getElementsByName("instruction");
alert(username);
if( username.value.length == 0){
alert("username is validate");
return false;
}
if(password == ""){
alert("username is validate");
return false;
}
if(
alert("the length of username is validate");
return false;
}
if(
alert("the length of password is validate");
return false;
}
if
alert("you must choose one type of sex!");
return false;}
if((
alert("please have a choice a again!");
return false;
}
if(!instruction){
alert("you should have some description");
return false;
}
return true;
}
</script>
</head>
<body>
<form οnsubmit="return vaildation()">
用户名：<input type="text" name="username" id="username"><br>
密码：<input type="password" name="password" id="password"><br>
性别：男<input type="radio" name="man" id=sex>
女<input type="radio"name="woman" id=sex> <br>
兴趣：足球<input type="checkbox"name=football" id="football">
排球<input type="checkbox" name="volyball" id="volyball">
羽毛球<input type="checkbox" name="badminton" id="badminton"> <br>
地址：<select>
<option value="山东">山东 </option>
<option value="河南">河南</option>
<option value="辽宁">辽宁</option>
<option value="济南">济南</option>
</select><br>
说明：<input type="textarea" name="instrution" id="instrustion"><br>
<input type="submit" value="点击确认" name="confirm" id="confirm"> <input type="reset" value="重置" name="confirm" id="confirm">
</form>
</body>
</html>
出现问题：
alert 不起作用！
图一 图二 图三
绿字部分 是为了调试所加。在给出的代码中出现图一效果。
对红字部分进行几次修改：
1.var username = document.getElementsByName("username")[0].value; if(username.length == 0) 效果只出现图一不出现图三发生错误。
2.var username = document.getElementsByName("username"); if(username[0].value.length == 0)效果先出现图二，然后出现图三。
3.var username = document.getElementsByName("username")[0].value; if(username == "") 效果与1一样。
4.ar username = document.getElementsByName("username"); if(username[0].value == "")效果与2一样。
结论：1.getElementsByName(“”） 获得的是元素是集合，不单一。
2. 作非空判断时可以考虑判断字符串的长度非空或者值非空。
3.调试时，可以点击页面控制台调试。如IE浏览器，点击工具下面的F12开发人员工具即可出现控制台等。测试上面的4情况，出现效果截图如图四
图四
- 对于出现图一，百思不得其解，对照一个源码，发现var username = document.getElementsByName("username")[0];等等 不是定义在function之内，改过来就好了。
经过几天的调试又修改了几个错误：
一、form 表单标签属性用错。
如蓝色字体所示，radio 组内互斥，name必须取相同名字，value属性属性值是给服务器端看的，当用户单击性别按钮，getelsmentByname("name')方法获得男女谁被选中信息，此方法给出指定参数的值。checkbox.也要加value属性。因为name都必须取名相同，这样只能通过getparameterValue("interest")获取集合。select 要有name属性。option 也必须有value值，这个恶值不少用户看到。也是传给服务器端的，这个值取名任意，不必和option选项名一致。加横线的textarea标签用错了，应该用<textarea></textarea>.形式。经修改后的表单如下：
<form action = "formservlet" οnsubmit="return vaildation()">
用户名：<input type="text" name="username" id="username"><br>
密码：<input type="password" name="password" id="password"><br>
性别：男<input type="radio" name="gender" value="男">
女<input type="radio" name="gender" value="女"> <br>
兴趣：足球<input type="checkbox" name="interest" value="football">
篮球 <input type="checkbox" name="interest" value="basketball">
排球<input type="checkbox" name="interest" value="volyball">
羽毛球<input type="checkbox" name="interest" value="badminton"> <br>
地址： <select name="address">
<option value="山东">山东</option>
<option value="河南">河南</option>
<option value="辽宁">辽宁</option>
<option value="济南">济南</option>
</select><br>
说明：<textarea name="instruction" rows="10" cols="20"></textarea><br>
<input type="submit" value="点击确认" name="confirm" id="confirm">
<input type="reset" value="重置" name="confirm" id="confirm">
</form>
二、javascript段中发现的问题
1.弄不清length和length（）的使用场合。length是java 平台给所有数组提供的一个属性，而getElementsByName(“”） 获得的是元素是集合，可以认为是数组，这就不能用length（）方法。如代码中加横线的所示。
2.判断按钮和多选框选中问题方法出错。主要原因是从表单中设置value值不对。如代码中加横线和下划线的所示。考虑按钮选中问题，由于radio按钮互斥，只需判断是否有一个选中即可。考虑多选框选中问题，由于是字符串存储信息，可通过判断遍历字符串，用计数器统计字符串的个数来得知选中个数。经修改如下：
function vaildate(){
var username = document.getElementsByName("username")[0];
var password = document.getElementsByName("password")[0];
var gender = document.getElementsByName("gender");
var interest = document.getElementsByName("interest");
var instruction = document.getElementsByName("instruction")[0];
//alert(username);
if(username.value == ""){
alert("username is blank");
return false;
}
if(password.value == ""){
alert("password is blank");
return false;
}
if(username.value.length < 4 || username.value.length > 10){
alert("the length of username is invalid");
return false;
}
if(password.value.length < 4 || password.value.length > 10){
alert("the length of password is invalid");
return false;
}
if(!gender[0].checked && !gender[1].checked){
alert("you must choose one type of sex!");
return false;
}
var n = 0;
for(var i= 0; i < interest.length; i++){
if(interest[i].checked)
n++;
}
if(n<1){
alert("please have a choice !");
return false;
}
if(n >3){
alert("you hava choose a lot,please have a choice again!");
return false;
}
if(instruction.value.length < 1){
alert("you should have some description");
return false;
}
return true;
}
</script>
3.java web 项目改名之后运行出错
解决方法：选择项目名 右键 然后如下图执行1 2 3
因为项目重命名 但是服务器端部署的名字不会同步更新。需要手动修改。
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
