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

JavaScript入门之二：Js基本事件，表单控制

2012-09-28 15:47 363 查看 
<html>
<head>
<title>标题-eventDemo</title>
</head>

<script language="Javascript">
/* 页面加载和卸载，对应的body： <body onLoad="welcome()" onUnload="byebye()">
function welcome()
{
alert("加载页面");
}
function byebye()
{
alert("退出页面");
}*/

/***************************************
* script函数全都写在这就行
* 下边body中分开些，是为了看着清楚一点
****************************************/

</script>

<body>

<!-- 1.单击事件 -->
<script language="Javascript">
function clickFun() //单击事件函数
{
alert("Click ed");
}
</script>
<a href="#" onClick="clickFun()">单击事件</a> <!-- 被单击超链接 -->
<br>

<!-- 2.显示文本框内，已输入的内容 -->
<script language="Javascript">
function showText()
{
var textValue = document.fromDemo01.text01.value;
alert("text中的文本："+textValue);
}
</script>
<form action="" method="post" name="fromDemo01">
文本框内输出内容:<input type="text" name="text01">
<!-- 显示按钮 -->
<input type="button" value="显示按钮" onClick="showText()">
</form>

<!-- 3.验证email -->
<script language="Javascript">
function checkEmail(o)
{
var emailValue = o.email01.value;
if(!(/^\w+@\w+.\w+$/.test(emailValue)))// 正则表达式（不要多余的空格）： /^内容$/.test(传值)
{
alert("email格式不正确："+emailValue);
o.email01.focus();// 如果格式不对，则选中错误文字
o.email01.select();
return false;
}
return ture;
}
</script>
<form action="imp.js" method="post" name="fromDemo02" onSubmit="return checkEmail(this)"><!-- onSubmit事件专门用于提交表单 -->
验证Email地址:<input type="text" name="email01">
<!-- 提交按钮 -->
<input type="submit" value="提交按钮"><!-- "submit"里用onClick="fun()"不好-->
</form>

<!-- 4.提取单选按钮(radio)内容 -->
<script language="Javascript">
function showRadio()
{
var textValue = document.fromDemo04.text04.value;
alert(" 姓名："+textValue);
var sex ;
// ！！！ js里由多个选项复用的对象，必须用数组表示
if(true == document.fromDemo04.sex[0].checked)
{
sex = document.fromDemo04.sex[0].value;
}
else
{
sex = document.fromDemo04.sex[1].value;
}
alert(" 性别: "+sex);
}
</script>
<form action="" method="post" name="fromDemo04">
姓名:<input type="text" name="text04">
性别:<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
<br>
<!-- 显示按钮 -->
<input type="button" value="显示按钮" onClick="showRadio()">
</form>

<!-- 5.提取复选框(checkbox)内容 -->
<script language="Javascript">
function showCheckBox()
{
var intst = "";
for(i=0;i<document.fromDemo05.interest.length;i++)
{
if(true == document.fromDemo05.interest[i].checked)
{
intst += document.fromDemo05.interest[i].value;
intst += " ";
}
}
alert(" 兴趣: "+intst);
}
</script>
<form action="" method="post" name="fromDemo05">
兴趣:<input type="checkbox" name="interest" value="唱歌">唱歌
<input type="checkbox" name="interest" value="跳舞">跳舞
<input type="checkbox" name="interest" value="XX" checked>XX
<input type="checkbox" name="interest" value="OO">OO
<br>
<!-- 显示按钮 -->
<input type="button" value="显示按钮" onClick="showCheckBox()">
</form>

<!-- 6.提取下拉菜单(select)内容 -->
<script language="Javascript">
/* 不带参的笨办法
function showSelect()
{
var dept = "";
for(i=0;i<document.fromDemo06.dept06.length;i++)
{
if(true == document.fromDemo06.dept06[i].selected)
{
dept += document.fromDemo06.dept06[i].value;
dept += " ";
}
}
alert(" 部门: "+dept);
}
*/
function showSelectP(val) //带参的方法
{
alert(val);
document.fromDemo06.resText06.value = val;
}
</script>
<form action="" method="post" name="fromDemo06">
部门:<select name="dept06" onChange="showSelectP(this.value)"> <!--下拉菜单变化则触发onChange事件 -->
<option value="技术部">技术部 </option>
<option value="A部">A部 </option>
<option value="B部">B部 </option>
<option value="C部" selected>C部 </option>
</select>
<br>
<!-- 不用显示按钮，改用onChange事件 -->
<!-- <input type="button" value="显示按钮" onClick="showSelect()"> -->

<!-- 修改结果文本 -->
选择结果:<input type="text" name="resText06" value="尚未选择">

</form>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript input action button email function
相关文章推荐
新的分享
章节导航