<html>
<head>
<title>javascript表单处理</title>
<script language="javascript">
function test01(){
if(document.getElementsByName('radiot01')[0].checked){
alert("单选框1选中了!");
}else if(document.getElementsByName('radiot01')[1].checked){
alert("单选框2选中了!");
}else if(document.getElementsByName('radiot01')[2].checked){
alert("单选框3选中了!");
}else{
alert("没有选中单选框!");
}
}
function test02(){
if(document.getElementsByName('box01')[0].checked || document.getElementsByName('box01')[1].checked
|| document.getElementsByName('box01')[2].checked){
if(document.getElementsByName('box01')[0].checked){
alert("复选框1选中了!");
}
if(document.getElementsByName('box01')[1].checked){
alert("复选框2选中了!");
}
if(document.getElementsByName('box01')[2].checked){
alert("复选框3选中了!");
}
}else{
alert("没有选中复选框!");
}
}
function test03sub(){
alert("submit按钮,执行此onClick后默认提交到表单,所以常设置成带返回值的形式");
return false;
}
function test03subret(){
alert("带返回值的submit,能否提交到表单看返回值的真假");
return false;
}
function test03but(){
alert("button按钮,执行此onClick后仍然在当前页");
}
function test04(){
if(document.form04.textna.value == ""){
alert("文本框text为空");
}else{
alert("文本框text有内容");
}
if(document.form04.tearna.value == ""){
alert("文本域textarea为空");
}else{
alert("文本域textarea有内容");
}
if(document.form04.passna.value == ""){
alert("密码框password为空");
}else{
alert("密码框password有内容");
}
}
function test5(){
if(document.form05.selname.value == "a"){
alert("您选择了aaa");
}
if(document.form05.selname.value == "b"){
alert("您选择了bbb");
}
if(document.form05.selname.value == "c"){
alert("您选择了ccc");
}
if(document.form05.selname.value == "d"){
alert("您选择了ddd");
}
if(document.form05.selname.value == "e"){
alert("您选择了eee");
}
}
</script>
</head>
<body>
<center><hr>
1.<font color="red">判断单选框是否选中</font>
<form name="form01" action="formevent.html" method="get">
<input type="radio" name="radiot01" />单选框1<br/>
<input type="radio" name="radiot01" />单选框2<br/>
<input type="radio" name="radiot01" />单选框3<br/>
<input type="radio" name="radiottt" checked/>单选框默认选中<br/>
<input type="button" name="button01" value="提交" onClick="test01();" />
</form>
<hr/><br/><br/>
2.<font color="red">判断复选框是否选中</font>
<form name="form02" action="formevent.html" method="get">
<input type="checkbox" name="box01" />复选框1<br/>
<input type="checkbox" name="box01" />复选框2<br/>
<input type="checkbox" name="box01" />复选框3<br/>
<input type="checkbox" name="boxxx" checked />复选框默认选中<br/>
<input type="button" name="button02" value="提交" onClick="test02()"/>
</form>
<hr/><br/><br/>
3.<font color="red">button和submit的区别</font>
<form name="form03" action="formevent.html" method="get">
<input type="submit" name="subname" value="submit" onClick="test03sub()" />
<input type="submit" name="subretname" value="retsubmit" onClick="return test03subret()" />
<input type="button" name="butname" value="button" onClick="test03but()" />
</form>
<hr/><br/><br/>
4.<font color="red">判断文本框和文本域中是否为空</font>
<form name="form04" action="formevent.html" method="get">
文本框:<input type="text" name="textna" /><br/>
文本域:<textarea name="tearna" cols="20" rows="3"></textarea><br/>
密码框:<input type="password" name="passna" />
<input type="button" name="butname" value="判断" onClick="test04()" />
</form>
<hr/><br/><br/>
5.<font color="red">按钮和下拉框(事件)是否可编辑(使用、使用)</font>
<form name="form06" action="formevent.html" method="get">
<input type="button" value="按钮可用" />
<input type="button" value="按钮不可用" disabled />
<select name="selname" onChange="test05()">
<option value="a">aaa</option>
<option value="b" selected>bbb</option>
<option value="c">ccc</option>
<option value="d">ddd</option>
<option value="e">eee</option>
</select>
</form>
<hr/><br/><br/>
6.<font color="red">js与正则表达式的详细用法请看下篇日志!</font>
<hr/><br/><br/>
</center>
</body>
</html>