1.所有的事件都是以On开头的,这也是事件的一个标准命名。
2.onsubmit事件是一个在表单上编写的事件操作,只要是表单提交都要触发此操作。
3.在JavaScript中如果用户输入的某些数据需要满足某些特定条件,则需要使用正则表达式。/正则/.test(内容)。而且在JavaScript中使用正则的时候最好加上开头“^”和结尾“$”。
4.在使用JavaScript的时候有一个特别重要的内容就是如果多个控件定义了同一个名字的话,则此时将按照数组的形式来操作。例如,选择性别时的情况。
示例代码:
(1)
<html>
<head>
<title>www.baidu.com</title>
<script language="javascript">
function hello(){
alert("欢迎您的光临!");
}
function byebye(){
alert("您要走了?请慢走!");
}
</script>
</head>
<body onLoad="hello()" onUnload="byebye()">
</body>
</html>
(2)
<html>
<head>
<title>www.baidu.com</title>
<script language="javascript">
function fun(){
alert("Hello World!!!");
}
</script>
</head>
<body>
<h3><a href="#" οnclick="fun()">按我吧!</a></h3> //使用“#”号代表自己链接自己。
</body>
</html>
(3)
<html>
<head>
<title>www.baidu.com</title>
<script language="javascript">
function show(){
var value = document.myform.name.value; //取得输入的字符串。
alert("输入的内容是:" + value);
}
</script>
</head>
<body>
<form action="" method="post" name="myform">
请输入内容:<input type="text" name="name" >
<input type="button" value="显示" οnclick="show()">
</form>
</body>
</html>
用浏览器执行此段代码的输出结果如下:
(4)
<html>
<head>
<title>www.baidu.com</title>
<script language="javascript">
function validate(f){
var value = f.email.value
if(!/^\w+@\w+.\w+$/.test(value)){ //注意正则表达式的格式。
alert("EMAIL输入格式不正确!");
f.email.focus(); //让email获得焦点。
f.email.select(); //让已有的内容全选。
return false;
}
return true;
}
</script>
</head>
<body>
<form action="html.htm" method="post" name="myform" οnsubmit="return validate(this)"> //注意验证表单时onsubmit的位置。
EMAIL:<input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>
其中html.htm页面的内容为:
/******************************************************************************************/
<html>
<head>
<title>www.baidu.com</title>
</head>
<body>
<form action="" method="post">
编 号:<input type="text" name="userid"
value="No."size="2" maxlength="2"><br>
用户名:<input type="text" name="username" value="请输入用户名:"><br>
密 码:<input type="password" name="userpass"
value="请输入密码"><br>
性 别:<input type="radio" name="sex" value="男"
checked>男
<input type="radio" name="sex" value="女">女<br>
部 门:<select name="dept">
<option value="技术部">技术部</option>
<option value="销售部" selected>销售部</option>
<option value="技术部">技术部</option>
</select><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="编程"checked>编程
<input type="checkbox" name="inst" value="上网">上网
<input type="checkbox" name="inst" value="运动">运动
<br>
说 明:<textarea name="note" cols="30" rows="3">清华大学-北京大学计算机科学与技术专 业:www.baidu.com
</textarea>
<br>
<input type="submit" value="提交"><input type="reset" value="重置">
</form>
<body>
</html>
/*******************************************************************************************/
用浏览器执行此段代码的输出结果如下:(验证输入的Email地址的格式是否正确。)
(5)
<html>
<head>
<title>www.baidu.com</title>
<script language="javascript">
function show(){
var name = document.myform.name.value;
alert("姓名: " + name);
var sex; //表示性别
if(document.myform.sex[0].checked){
sex = document.myform.sex[0].value;
}else{
sex = document.myform.sex[1].value;
}
alert("性别: " + sex);
var inst = ""; //复选框的内容也以数组的形式表示。
for(i=0; i<document.myform.inst.length; i++){
if(document.myform.inst[i].checked){
inst += document.myform.inst[i].value + " ";
}
}
alert("兴趣:" + inst);
}
</script>
</head>
<body>
<form action="html.htm" method="post" name="myform">
姓名:<input type="text" name="name"><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="编程"checked>编程
<input type="checkbox" name="inst" value="看书">看书
<input type="checkbox" name="inst" value="跑步">跑步<br>
<input type="button" value="显示" οnclick="show()">
</form>
</body>
</html>
用浏览器执行此段代码的输出结果如下:
(6)
<html>
<head>
<title>www.baidu.com</title>
<script language="javascript">
function show(val){
alert(val);
document.myform.result.value = val;
}
</script>
</head>
<body>
<form action="html.htm" method="post" name="myform">
部门:<select name="dept" onchange="show(this.value)">
<option value="技术部">技术部
<option value="销售部">销售部
<option value="财务部">财务部
</select>
结果:<input type="text" name="result" value="">
</form>
</body>
</html>
用浏览器执行此段代码的输出结果如下: