第5讲：JavaScript在表单元素上的应用（一）
5.1 检验表单元素的方式
alert方法属于window对象，其使用格式如下：
n window.alert("string")
n alert("string")
〔示例一〕
<html><head><title>Welcome to hfcec...</title>
<script language="javascript">
<!--
//定义函数，函数的参数text起着传递字符串的作用
function alert_info(text)
{
window.alert(text);
}
//-->
</script>
</head>
<!--在body标记中加入onload属性，其目的是为了保证页面在载入时即调用函数-->
<body onload="alert_info('页面已完全载入！ 页面载入的同时调用了函数。')">
<form name="frm">
<input type="button" value="点击该按钮调用函数" name="button"
onclick="alert_info('您刚才肯定点击了按钮，否则不会出现当前消息框！ ')">
</form>
</body>
</html>
注意：上述代码也完全可以用如下代码代替，其最终的效果完全一样，具体代码如下：
<html><head><title>Welcome to hfcec...</title>
</head>
<body onload="alert('页面已完全载入！ 页面载入的同时触发了alert事件。')">
<form name="frm">
<input type="button" value="点击该按钮触发事件" name="button"
onclick="alert('您刚才肯定点击了按钮，否则不会出现当前消息框！ ')">
</form>
</body></html>
5.2 复选框checkbox的验证
复选框checkbox的HTML代码如下：
<input type="checkbox" name="checkbox" value="checkbox" checked>
注意：checkbox的name属性其属性值不可以一样。
复选框是否被选中的检验语法如下：
document.form.checkbox.checked
〔示例二〕
<html>
<head>
<title>Welcome to hfcec...</title>
<script language="javascript">
<!--
function show()
{
sport_select1="足球";
sport_select2="篮球";
sport_select3="垒球";
sport_select4="棒球";
common="你的选择是：";
var text="";
if (document.frm.checkbox1.checked) {text=text+sport_select1+" ";}
if (document.frm.checkbox2.checked) {text=text+sport_select2+" ";}
if (document.frm.checkbox3.checked) {text=text+sport_select3+" ";}
if (document.frm.checkbox4.checked) {text=text+sport_select4+" ";}
if (text!="")
{
text=common+text;
alert(text);
}
else
alert("您没有做任何选择！");
}
//-->
</script>
</head>
<body>
<form name="frm">
<input type="checkbox" name="checkbox1" value="checkbox"> 足球<p>
<input type="checkbox" name="checkbox2" value="checkbox"> 篮球<p>
<input type="checkbox" name="checkbox3" value="checkbox"> 垒球<p>
<input type="checkbox" name="checkbox4" value="checkbox"> 棒球<p>
<input type="button" value="显示您选择的选项" onclick="show()">
<input type="reset" value="清除选项">
</form>
</body>
</html>
文本框text的验证
文本框text的HTML代码如下：
<input type="text" name="name" value="string" size="num">
注意：属性type的默认类型就是text，name的属性值在同一表单域中必须唯一。
〔示例三〕
<html>
<head>
<title>Welcome to hfcec...</title>
<script language="javascript">
<!--
function check_email() {
var address=document.frm.email.value
if ((address == "") || (address.indexOf ('@') == -1) || (address.indexOf ('.') == -1))
{alert("您输入的E-mail地址不正确，请重新输入，谢谢！");}
else
alert("地址输入正确！");
}
//-->
</script>
</head>
<body>
<form name="frm">
<input type="text" name="email" size="25" value="">
<input type="button" value="检验E-mail地址是否合法" onclick="check_email()">
<input type="reset" value="清除文本框的内容">
</form>
</body>
</html>
图5-3 检验E-mail地址的合法性
5.4 多行文本域textarea的检验
〔示例四〕
<html>
<head>
<title>Welcome to hfcec...</title>
<script language="javascript">
<!--
function check_textarea()
{
var text=document.frm.textarea_info.value;
var new_window=open("","mywin","menubar=no,width=300,height=100,resizable=yes");
new_window.document.writeln("<html><head><title>输出结果显示</title></head>");
new_window.document.writeln("<body bgcolor=#e8e8e8>");
new_window.document.writeln("<p>",text);
new_window.document.close();
}
//-->
</script>
<body>
<form name="frm">
<textarea name="textarea_info" cols="50" rows="10"></textarea>
<p>
<input type="button" value="查看输出结果" onclick="check_textarea()">
<input type="reset" value="清除文本信息">
</form>
</body>
</html>
