<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
因为项目重命名 但是服务器端部署的名字不会同步更新。需要手动修改。