您的位置：首页 > Web前端 > JavaScript

javascript表单事件处理的小范例

2013-12-12 16:34 429 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 学习经验

相关文章推荐

新的分享

章节导航