javascript表单事件处理的小范例

来源：互联网发布：mac finder打不开编辑：程序博客网时间：2024/04/30 14:35

<html>
<head>
<title>单选跟复选</title>
<script language="javascript">
function fun(f){
   //返回姓名
   var name=f.name.value;
   alert("您的姓名："+name);

   //单选框输出性别
   var sex;
   for(i=0;i<f.sex.length;i++){
      if(f.sex[i].checked){
  sex=f.sex[i].value;
  alert("性别为："+sex);
   }
   }

   //复选框输出兴趣
   var inst="";
   for(i=0;i<f.inst.length;i++){
     if(f.inst[i].checked){
  inst+=f.inst[i].value+"、";

     }

   }
   alert("爱好是："+inst);

   //下拉列表输出部门
   var dept=f.dept.value;
   alert("所属部门："+dept);

//验证邮箱
   var email=f.email.value;
   if(!/^\w+@\w+.\w+$/.test(email)){
    alert("邮箱格式不正确！");
    f.email.focus(); //返回光标所在
    f.email.select(); //选择错误输出的文本
    return false;
}

        }

</script>
</head>
<body>
<form action="" method="post" name="f" onsubmit="return fun(this)">
姓名：<input type="text" name="name" ><br>
请输入邮箱:<input type="text" name="email"><br>
性别：<input type="radio" name="sex" value="男" checked>男
       <input type="radio" name="sex" value="女">女
<br>
兴趣:<input type="checkbox" name="inst" value="唱歌">唱歌
      <input type="checkbox" name="inst" value="画画">画画
      <input type="checkbox" name="inst" value="编程">编程
      <input type="checkbox" name="inst" value="游戏">游戏
<br>
部门：<select name="dept">
  <option>美工</option>美工
  <option>测试</option>测试
  <option>数据库</option>数据库
  <option>代码</option>代码
       </select>
<br>
<input type="submit" value="确定">
</form>
</body>
</html>

0 0