一、函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
(1)无参数,无返回值函数。
弹出一个欢迎信息:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无参,无返回值函数</title>
<script type="text/javascript">
//无参,无返回值函数
function welcome()
{
alert("欢迎来到****网站");
}
</script>
</head>
<body>
<script type="text/javascript">
welcome();
</script>
</body>
</html>
(2)有参,无返回值函数。
接受长方形的长和宽,计算出面积:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有参,无返回值函数</title>
<script type="text/javascript">
//有参,无返回值函数
//接受长方形的长和宽,求面积
function getArea(width,height)
{
var area = width*height;
alert("面积为:" + area);
}
</script>
</head>
<body>
<script type="text/javascript">
getArea(10,15);
</script>
</body>
</html>
(3)有参,有返回值函数。
编写两个函数,一个接受长方形的长和宽,计算长方形面积;一个接受半径,计算出圆面积。
分别调用函数求长方形面积,圆面积,和总面积:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有参,有返回值函数</title>
<script type="text/javascript">
//有参,有返回值函数
//计算长方形面积
function getCfxArea(width,height)
{
var area = width*height;
return area;
}
//计算圆面积
function getYuanArea(r)
{
var area = 3.14*r*r;
return area;
}
</script>
</head>
<body>
<script type="text/javascript">
var cfxArea = getCfxArea(5,10);
//var yuanArea = parseInt(getYuanArea(6)); //转换为整数
var yuanArea = getYuanArea(6).toFixed(2);
var allArea = parseFloat(cfxArea) + parseFloat(yuanArea);
allArea = allArea.toFixed(2);
alert("长方形面积:" + cfxArea + "\n圆面积:" + yuanArea + "\n总面积:" + allArea);
</script>
</body>
</html>
二、变量的作用域
通过如下例子了解变量作用域:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>变量的作用域</title>
</head>
<body>
<script type="text/javascript">
//变量的作用域
var myName = "刘德华";
function showName()
{
var myName = "张学友";
alert(myName + "欢迎您!"); //此处的myName为"张学友"
}
showName();
alert(myName + "欢迎您!"); //此处的myName为"刘德华"
</script>
</body>
</html>
JS中变量只有在自己的作用域内才能使用,如果出现变量名冲突,则采取就近原则。
三、常用系统函数
(1)parseInt:转换为整型
var obj;
obj = parseInt("150"); //150
obj = parseInt("150Hello"); //150
obj = parseInt("hello150"); //NaN
obj = parseInt("hello"); //NaN
obj = parseInt("6.66"); //6
(2)parseFloat:转换为浮点型
var obj;
obj = parseFloat("6"); //6
obj = parseFloat("66.66Hello"); //66.66
obj = parseFloat("hello66.66"); //NaN
obj = parseFloat("hello"); //NaN
obj = parseFloat("6.66"); //6.66
obj = parseFloat(".666"); //0.666
(3)isNaN:判断是否是数字,不是数字返回true,是数字返回false
var obj;
obj = isNaN("666"); //false
obj = isNaN("6b66"); //true
obj = isNaN("6.66"); //false
obj = isNaN(" "); //false,此处为特殊情况
obj = isNaN("hello"); //true
(4)eval:运行以字符串形式表示的JavaScript代码串
var str = "1+2*3-4";
var obj = eval(str);
alert(obj); //结果为3
四、JS中常用事件
本文介绍JS中常用事件包括:
onclick、onload、onfocus、onblur、onchange、 onmouseover、onmouseout、onsubmit
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript事件</title>
<script type="text/javascript">
//网页加载的时候执行的函数
function onloadFun()
{
alert("窗体被加载了!");
}
//网页关闭的时候执行的函数
function closeFun()
{
window.open("Demo06.html");
}
//点击某个对象的时候执行的函数
function clickFun()
{
alert("主人,你点击我做什么");
}
//离开某个标签的时候执行的函数
function blurFun()
{
alert("光标或焦点离开了元素");
}
//值发生改变的时候触发的事件函数
function changeFun()
{
alert("选项发生了改变");
}
//鼠标移入执行的函数
function mouseoverFun()
{
alert("鼠标移动进来了!");
}
//鼠标移出执行的函数
function mouseoutFun()
{
alert("鼠标移动出去了!");
}
//表单提交执行的函数
function submitFun()
{
alert("登录请求马上发送!");
}
</script>
</head>
<!--加载网页和关闭网页的事件,老版本浏览器支持onunload,现在大多数浏览器不支持-->
<body onload="onloadFun();" onunload="closeFun();">
<!--点击事件-->
<input type="button" onclick="clickFun();" value="测试点击事件">
<!--光标或者焦点离开元素后触发事件-->
<input type="text" onblur="blurFun();">
<!--值发生改变的时候触发的事件-->
<select onchange="changeFun();">
<option>爱奇艺网站</option>
<option>优酷网站</option>
<option>A站</option>
<option>B站</option>
</select>
<!--鼠标的移入移出事件-->
<img src="img/486-160912223608.jpg"
width="100" onmouseover="mouseoverFun();" onmouseout="mouseoutFun();">
<!--表单提交事件-->
<br/><br/>
<form method="post" onsubmit="submitFun();">
用户名:<input type="text" name="acc" /><br>
密码:<input type="password" name="pwd" /><br>
<input type="submit" value="登录" >
</form>
</body>
</html>
五、JS获取表单元素内容
本章节内容主要介绍:
(1)JS获取常见的表单元素内容;
(2)使用匿名函数简化函数的定义及调用;
(3)使用return false来阻止a标签的href跳转以及阻止表单的提交;
一、获取常见的表单元素内容
(1)获取文本框内容:
<input type="text" id="txt1">
<input type="button" value="获取文本框内容" onclick="getTxt()">
function getTxt()
{
var obj = document.getElementById("txt1");
alert(obj.value);
}
(2)获取单选框内容:
<input type="radio" name="sex" id="boy" value="男"> 男
<input type="radio" name="sex" id="girl" value="女">女
<input type="button" value="获取单选框内容" onclick="getRadio()">
function getRadio()
{
//方案一:
var objs = document.getElementsByName("sex");
for(var i = 0;i<= objs.length;i++)
{
if(objs[i].checked == true)
alert(objs[i].value);
}
//方案二:
//var obj;
//obj = document.getElementById("boy");
//if(obj.checked == true)
// alert(obj.value);
//obj = document.getElementById("girl");
//if(obj.checked == true)
//alert(obj.value);
}
(3)获取多选框内容:
<input type="checkbox" name="hobby" value="抽烟"> 抽烟
<input type="checkbox" name="hobby" value="喝酒"> 喝酒
<input type="checkbox" name="hobby" value="烫头发"> 烫头发
<input type="button" value="获取多选框内容" onclick="getCheckBox()">
function getCheckBox()
{
var objs = document.getElementsByName("hobby");
var strHobby = "";
for(var i = 0;i<objs.length;i++)
{
if(objs[i].checked == false)
continue;
if(strHobby.length != 0)
strHobby = strHobby + ",";
strHobby = strHobby + objs[i].value;
}
alert(strHobby);
}
(4)获取下拉框内容:
<select id="professional">
<option value="">--请选择--</option>
<option value="计算机">计算机</option>
<option value="工商管理">工商管理</option>
<option value="国际贸易">国际贸易</option>
<option value="电子商务">电子商务</option>
</select>
<input type="button" value="获取下拉框内容" onclick="getSelect();">
function getSelect()
{
var obj = document.getElementById("professional");
alert(obj.value);
}
(5)获取多行文本框内容:
<textarea rows="10" cols="60" id="mySelf"></textarea>
<input type="button" value="获取多行文本框内容" onclick="getTextArea();">
function getTextArea()
{
var obj = document.getElementById("mySelf");
alert(obj.value);
}
二、使用匿名函数简化函数的定义及调用
通常情况下,JS中触发某事件调用某一个函数,需要编写一个函数,并且在HTML中编写事件调用代码;
使用匿名函数,可以实现在HTML中无需编写事件调用代码;
如下,点击按钮获取文本框内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用匿名函数简化函数的定义及调用</title>
</head>
<body>
<form>
文本框:<input type="text" id="txt1">
<input type="button" id="bt1" value="获取文本框内容">
<br><br>
</form>
</body>
</html>
<script type="text/javascript">
document.getElementById("bt1").onclick = function()
{
var obj = document.getElementById("txt1");
alert(obj.value);
}
</script>
三、使用return false来阻止a标签的href跳转以及阻止表单的提交
(1)阻止a标签的href跳转:
<a href="Demo09_01.html" onclick="return regClick();">立即注册</a>
function regClick()
{
return false;
}
(2)阻止表单的提交:
<form action="Demo09_02.html" onsubmit="return formSubmit();">
用户名:<input type="text" id="txtAccount"><br><br>
密 码:<input type="password" id="txtPwd"><br><br>
<input type="submit" value="登录">
</form>
function formSubmit()
{
return false;
}
六、应用
该章节使用上述1-5个章节知识点,制作一些小的应用案例。
一、使用eval函数实现计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用eval函数实现计算器</title>
<script type="text/javascript">
function compute()
{
var obj = document.getElementById("txtContent");
var result = eval(obj.value);
document.getElementById("txtResult").value = result;
}
</script>
</head>
<body>
请输入算术内容:
<input type="text" id="txtContent">
<input type="button" value="计算" onclick="compute();">
<input type="text" id="txtResult">
</body>
</html>
二、实现两个数字加减乘除的计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现两个数字加减乘除的计算器</title>
<script type="text/javascript">
function compute()
{
var num1 = document.getElementById("txt1").value;
var num2 = document.getElementById("txt2").value;
var fuhao = document.getElementById("fuhao").value;
if(isNaN(num1) || isNaN(num2))
{
alert("请输入数字进行计算!");
return;
}
if(fuhao.length == 0)
{
alert("请选择符号!");
return;
}
num1 = parseFloat(num1);
num2 = parseFloat(num2);
var result = 0;
if(fuhao == "+")
result = num1 + num2;
if(fuhao == "-")
result = num1 - num2;
if(fuhao == "*")
result = num1 * num2;
if(fuhao == "/")
result = num1 / num2;
document.getElementById("txtResult").value = result;
}
</script>
</head>
<body>
<input type="text" id="txt1">
<select id="fuhao">
<option value="">请选择符号</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="txt2">
<input type="button" value="计算" onclick="compute();">
<input type="text" id="txtResult">
</body>
</html>
三、注册表单验证
(1)方案一:针对每个元素的合法性单独弹框进行提示;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册表单验证</title>
<script type="text/javascript">
function reg()
{
//用户名验证
var acc = document.getElementById("txtAccount").value;
if(acc.length == 0)
{
alert("用户名不能为空!");
return false;
}
if(acc.length < 6 || acc.length > 12)
{
alert("用户名长度必须在6-12位之间!");
return false;
}
//密码验证
var pwd = document.getElementById("txtPwd").value;
var pwdOk = document.getElementById("txtPwdOk").value;
if(pwd.length == 0)
{
alert("密码不能为空!");
return false;
}
if(pwd.length < 6 || pwd.length > 12)
{
alert("密码长度必须在6-12位之间!");
return false;
}
if(pwd != pwdOk)
{
alert("两次输入密码不一致!");
return false;
}
//性别验证
var objBoy = document.getElementById("rdBoy");
var objGirl = document.getElementById("rdGirl");
if(objBoy.checked == false && objGirl.checked == false)
{
alert("必须选择性别!");
return false;
}
//专业验证
var professional = document.getElementById("selProfessional").value;
if(professional.length == 0)
{
alert("请选择专业!");
return false;
}
//爱好验证
var hobbys = document.getElementsByName("hobby");
var boolFlag = false;
for(var i = 0;i< hobbys.length;i++)
{
if(hobbys[i].checked == true)
{
boolFlag = true;
}
}
if(boolFlag == false)
{
alert("爱好至少选择一项!");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="Demo12_01.html" onsubmit="return reg();">
<table width="1000" align="center">
<caption>用户注册</caption>
<tr>
<td width="300" align="right" height="30">用户名:</td>
<td width="700"><input type="text" id="txtAccount">
<span style="color: red;">*</span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">密码:</td>
<td width="700"><input type="password" id="txtPwd">
<span style="color: red;">*</span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">密码确认:</td>
<td width="700"><input type="password" id="txtPwdOk">
<span style="color: red;">*</span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">性别:</td>
<td width="700">
<input type="radio" name="sex" id="rdBoy" value="男">男
<input type="radio" name="sex" id="rdGirl" value="女">女
<span style="color: red;">*</span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">专业:</td>
<td width="700">
<select id="selProfessional">
<option value="">--请选择--</option>
<option value="软件开发">软件开发</option>
<option value="电子商务">电子商务</option>
<option value="国际贸易">国际贸易</option>
<option value="工商管理">工商管理</option>
<option value="高级护理">高级护理</option>
</select>
<span style="color: red;">*</span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">爱好:</td>
<td width="700">
<input type="checkbox" name="hobby" value="抽烟" />抽烟
<input type="checkbox" name="hobby" value="喝酒" />喝酒
<input type="checkbox" name="hobby" value="打游戏" />打游戏
<input type="checkbox" name="hobby" value="烫头发" />烫头发
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="篮球" />篮球
<span style="color: red;">*</span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">自我介绍:</td>
<td width="700">
<textarea id="mySelf" rows="10" cols="60"></textarea>
</td>
</tr>
<tr>
<td width="300" align="right" height="30"> </td>
<td width="700">
<input type="submit" value="注册" />
<input type="reset" value="取消" />
</td>
</tr>
</table>
</form>
</body>
</html>
(2)方案二:针对每个元素的合法性使用一个弹框,弹出所有的问题;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册表单验证</title>
<script type="text/javascript">
function reg()
{
var msg = "";
//用户名验证
var acc = document.getElementById("txtAccount").value;
if(acc.length == 0)
msg += "用户名不能为空!\n";
else if(acc.length < 6 || acc.length > 12)
msg += "用户名长度必须在6-12位之间!\n";
//密码验证
var pwd = document.getElementById("txtPwd").value;
var pwdOk = document.getElementById("txtPwdOk").value;
if(pwd.length == 0)
msg += "密码不能为空!\n";
else if(pwd.length < 6 || pwd.length > 12)
msg += "密码长度必须在6-12位之间!\n";
else if(pwd != pwdOk)
msg += "两次输入密码不一致!\n";
//性别验证
var objBoy = document.getElementById("rdBoy");
var objGirl = document.getElementById("rdGirl");
if(objBoy.checked == false && objGirl.checked == false)
msg += "必须选择性别!\n";
//专业验证
var professional = document.getElementById("selProfessional").value;
if(professional.length == 0)
msg += "请选择专业!\n";
//爱好验证
var hobbys = document.getElementsByName("hobby");
var boolFlag = false;
for(var i = 0;i< hobbys.length;i++)
{
if(hobbys[i].checked == true)
{
boolFlag = true;
}
}
if(boolFlag == false)
msg += "爱好至少选择一项!\n";
if(msg.length != 0)
{
alert(msg);
return false;
}
return true;
}
</script>
</head>
<body>
<form action="Demo12_01.html" onsubmit="return reg();">
<table width="1000" align="center">
<caption>用户注册</caption>
<tr>
<td width="300" align="right" height="30">用户名:</td>
<td width="700"><input type="text" id="txtAccount">
<span style="color: red;">*</span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">密码:</td>
<td width="700"><input type="password" id="txtPwd">
<span style="color: red;">*</span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">密码确认:</td>
<td width="700"><input type="password" id="txtPwdOk">
<span style="color: red;">*</span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">性别:</td>
<td width="700">
<input type="radio" name="sex" id="rdBoy" value="男">男
<input type="radio" name="sex" id="rdGirl" value="女">女
<span style="color: red;">*</span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">专业:</td>
<td width="700">
<select id="selProfessional">
<option value="">--请选择--</option>
<option value="软件开发">软件开发</option>
<option value="电子商务">电子商务</option>
<option value="国际贸易">国际贸易</option>
<option value="工商管理">工商管理</option>
<option value="高级护理">高级护理</option>
</select>
<span style="color: red;">*</span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">爱好:</td>
<td width="700">
<input type="checkbox" name="hobby" value="抽烟" />抽烟
<input type="checkbox" name="hobby" value="喝酒" />喝酒
<input type="checkbox" name="hobby" value="打游戏" />打游戏
<input type="checkbox" name="hobby" value="烫头发" />烫头发
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="篮球" />篮球
<span style="color: red;">*</span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">自我介绍:</td>
<td width="700">
<textarea id="mySelf" rows="10" cols="60"></textarea>
</td>
</tr>
<tr>
<td width="300" align="right" height="30"> </td>
<td width="700">
<input type="submit" value="注册" />
<input type="reset" value="取消" />
</td>
</tr>
</table>
</form>
</body>
</html>
(3)方案三:表单元素合法性提示不适用弹框,直接在页面上及时显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册表单验证</title>
<style type="text/css">
.errInfo{color: red; font-size: 12px;}
.errInfo img{ vertical-align:middle;}
</style>
<script type="text/javascript">
//检查用户名
function CheckAccount()
{
var acc = document.getElementById("txtAccount").value;
var objSpan = document.getElementById("spanAccount");
if(acc.length == 0)
{
objSpan.innerHTML = "<img src='img/li_err.gif'> 用户名不能为空!";
return false;
}
else if(acc.length < 6 || acc.length > 12)
{
objSpan.innerHTML = "<img src='img/li_err.gif'> 用户名长度必须在6-12位之间!";
return false;
}
else
{
objSpan.innerHTML = "<img src='img/li_ok.gif'>";
return true;
}
}
//检查密码
function CheckPwd()
{
//密码验证
var pwd = document.getElementById("txtPwd").value;
var pwdOk = document.getElementById("txtPwdOk").value;
var objSpan = document.getElementById("spanPwd");
if(pwd.length == 0)
{
objSpan.innerHTML = "<img src='img/li_err.gif'> 密码不能为空!";
return false;
}
else if(pwd.length < 6 || pwd.length > 12)
{
objSpan.innerHTML = "<img src='img/li_err.gif'> 密码长度必须在6-12位之间!";
return false;
}
else
{
objSpan.innerHTML = "<img src='img/li_ok.gif'>";
return true;
}
}
//检查密码确认
function CheckPwdOk()
{
var pwd = document.getElementById("txtPwd").value;
var pwdOk = document.getElementById("txtPwdOk").value;
var objSpan = document.getElementById("spanPwdOk");
if(pwdOk.length == 0)
{
objSpan.innerHTML = "<img src='img/li_err.gif'> 密码确认不能为空!";
return false;
}
else if(pwd != pwdOk)
{
objSpan.innerHTML = "<img src='img/li_err.gif'> 两次输入密码不一致!";
return false;
}
else
{
objSpan.innerHTML = "<img src='img/li_ok.gif'>";
return true;
}
}
//检查性别
function CheckSex()
{
var objBoy = document.getElementById("rdBoy");
var objGirl = document.getElementById("rdGirl");
var objSpan = document.getElementById("spanSex");
if(objBoy.checked == false && objGirl.checked == false)
{
objSpan.innerHTML = "<img src='img/li_err.gif'> 必须选择性别!";
return false;
}
else
{
objSpan.innerHTML = "<img src='img/li_ok.gif'>";
return true;
}
}
//检查专业
function CheckProfessional()
{
var professional = document.getElementById("selProfessional").value;
var objSpan = document.getElementById("spanProfessional");
if(professional.length == 0)
{
objSpan.innerHTML = "<img src='img/li_err.gif'> 请选择专业!";
return false;
}
else
{
objSpan.innerHTML = "<img src='img/li_ok.gif'>";
return true;
}
}
//检查爱好
function CheckHobby()
{
var objSpan = document.getElementById("spanHobby");
var hobbys = document.getElementsByName("hobby");
var boolFlag = false;
for(var i = 0;i< hobbys.length;i++)
{
if(hobbys[i].checked == true)
{
boolFlag = true;
}
}
if(boolFlag == false)
{
objSpan.innerHTML = "<img src='img/li_err.gif'> 爱好至少选择一项!";
return false;
}
else
{
objSpan.innerHTML = "<img src='img/li_ok.gif'>";
return true;
}
}
//注册表单提交
function reg()
{
if(CheckAccount() & CheckPwd() & CheckPwdOk() & CheckSex()
& CheckProfessional() & CheckHobby() )
return true;
else
return false;
//
// var boolResult = true;
// boolResult = CheckAccount()?boolResult:false;
// boolResult = CheckPwd()?boolResult:false;
// boolResult = CheckPwdOk()?boolResult:false;
// boolResult = CheckSex()?boolResult:false;
// boolResult = CheckProfessional()?boolResult:false;
// boolResult = CheckHobby()?boolResult:false;
// return boolResult;
}
</script>
</head>
<body>
<form action="Demo12_01.html" onsubmit="return reg();">
<table width="1000" align="center">
<caption>用户注册</caption>
<tr>
<td width="300" align="right" height="30">用户名:</td>
<td width="700"><input type="text" id="txtAccount" onblur="CheckAccount();">
<span id="spanAccount" class="errInfo"></span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">密码:</td>
<td width="700"><input type="password" id="txtPwd" onblur="CheckPwd();">
<span id="spanPwd" class="errInfo"></span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">密码确认:</td>
<td width="700"><input type="password" id="txtPwdOk" onblur="CheckPwdOk();">
<span id="spanPwdOk" class="errInfo"></span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">性别:</td>
<td width="700">
<input type="radio" name="sex" id="rdBoy" value="男" onblur="CheckSex();">男
<input type="radio" name="sex" id="rdGirl" value="女" onblur="CheckSex();">女
<span id="spanSex" class="errInfo"></span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">专业:</td>
<td width="700">
<select id="selProfessional" onblur="CheckProfessional();">
<option value="">--请选择--</option>
<option value="软件开发">软件开发</option>
<option value="电子商务">电子商务</option>
<option value="国际贸易">国际贸易</option>
<option value="工商管理">工商管理</option>
<option value="高级护理">高级护理</option>
</select>
<span id="spanProfessional" class="errInfo"></span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">爱好:</td>
<td width="700" >
<input type="checkbox" name="hobby" value="抽烟" onblur="CheckHobby();"/>抽烟
<input type="checkbox" name="hobby" value="喝酒" onblur="CheckHobby();"/>喝酒
<input type="checkbox" name="hobby" value="打游戏" onblur="CheckHobby();"/>打游戏
<input type="checkbox" name="hobby" value="烫头发" onblur="CheckHobby();"/>烫头发
<input type="checkbox" name="hobby" value="足球" onblur="CheckHobby();"/>足球
<input type="checkbox" name="hobby" value="篮球" onblur="CheckHobby();"/>篮球
<span id="spanHobby" class="errInfo"></span>
</td>
</tr>
<tr>
<td width="300" align="right" height="30">自我介绍:</td>
<td width="700">
<textarea id="mySelf" rows="10" cols="60"></textarea>
</td>
</tr>
<tr>
<td width="300" align="right" height="30"> </td>
<td width="700">
<input type="submit" value="注册" />
<input type="reset" value="取消" />
</td>
</tr>
</table>
</form>
</body>
</html>
网友评论