JavaScript 语言 4 学习交流网站：心蕊设计 xin126/

第 4章 JavaScript 语言4学习交流网站：心蕊设计http://xin126.cn/

JavaScript 表单验证 • 表单对象的作用 • 与用户进行交互 • 接收并处理用户的输入 • JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。被 JavaScript 验证的这些典型的表单数据有： • 用户是否已填写表单中的必填项目？ • 用户输入的邮件地址是否合法？ • 用户是否已输入合法的日期？

表单对象示例 <form name="form1" method="post" action="result.htm"> 请输入查询内容: <input type="text" name="keyword"> <input type="submit" value="提交查询"> <input type="reset" value="重置"> </form> 例01.htm

验证用户是否输入数据 <script language="javascript"> function checkForm() { if(document.form1.keyword.value==""){ alert("请输入查询内容"); document.form1.keyword.focus(); return false; } }</script> <form name="form1" method="post" action= "result.htm" onSubmit="return checkForm()">

命令按钮事件示例 <SCRIPT LANGUAGE="JavaScript"> function copyto(value) { myfm.second_text.value=value; } </SCRIPT> <form name="myfm"> <input type="text" name="first_text"> <input type="button" value="复制"onClick="copyto(myfm.first_text.value);"> <input type="text" name="second_text"> </form> 例02.htm

复选框事件示例 <SCRIPT LANGUAGE="JavaScript"> function switchLight() { if (document.form1.check1.checked == false) { alert("请把灯打开！"); document.bgColor='black'; } else { alert("谢谢！"); document.bgColor='white'; } } </SCRIPT> <body bgcolor="#FFFFFF"><form name="form1"> 电灯开关<input type="checkbox" name ="check1" checked onClick="switchLight();"> </form></body> 例03.htm

思考练习： 用单选按钮实现开灯关灯例04.htm

练习：实现+运算(1) <form name="form1" > <input type="text" name="x" OnKeyPress="return check(event)"> + <input type="text" name="y" OnKeyPress="return check(event)"> = <input type="text" name="z"> <input type="submit" name="Submit" value="计算" onClick="return sum()"> </form> 例05.htm

练习：实现+运算(2) function sum() { if(document.form1.x.value==""){ alert("请输入被加数"); document.form1.x.focus(); return false; } if(document.form1.y.value==""){ alert("请输入加数"); document.form1.y.focus(); return false; } document.form1.z.value=Number(document.form1.x.value)+Number(document.form1.y.value); return false; }

练习：实现+运算(3) function check(thekey){ if(thekey.keyCode>=48&&thekey.keyCode<=57){ /*通过用户输入键值的ASCII码判断,限制用户只能输入数字而屏蔽其它按键*/ return true;} else{ alert("你输入的不是数字"); return false; } }

显示用户停留时间(1) getTime() 可返回距1970年1月1日之间的毫秒数。 <script language="JavaScript"> var now = new Date(); document.write(now.getTime()); </script>例06.htm 显示用户停留时间页面代码： <form name="myform"> 您在线时间为：<input type="text" name="clock" > </form>

显示用户停留时间(2) <script language="JavaScript"> var min = 0, sec = 1; start = new Date(); function go(){ now = new Date(); time = Math.floor((now.getTime() - start.getTime()) / 1000); min = Math.floor( time / 60); sec = time % 60; if ( sec < 10) document.myform.clock.value = " " + min + " 分 0" + sec + " 秒"; else document. myform.clock.value = " " + min + " 分 " + sec + " 秒"; } setInterval( "go()", 1000); </script> 例4-5-4.html

数据有效性验证实例（1） 例：4-5-10checkForm.html if (document.user.username.value=="") { alert("用户名必须填写!") document.user.username.focus() return false } if (document.user.pwd.value=="") { alert("密码必须填写!") document.user.pwd.focus() return false }

数据有效性验证实例（2） if (!(document.user.M.checked ||document.user.W.checked )) { alert("性别必须选择") return false } 性别: <INPUT TYPE="radio" NAME="sex" value="男" id="M">男 <INPUT TYPE="radio" NAME="sex" value="女" id="W">女

数据有效性验证实例（3） if (document.user.year.value==“”){ ...... } if (document.user.year.value.length<4)//?? { alert(“年份必须是4位数字”); document.user.year.focus(); return false ; } if (!isNumber(document.user.year.value)) { alert(“年份必须是4位数字”); document.user.year.focus(); return false} if (document.user.year.value<1900 || document.user.year.value>2009) { alert(“请输入真实年份”); document.user.year.focus(); return false}

数据有效性验证实例（4） var flag = false if (document.user.ah1.checked) flag = true if (document.user.ah2.checked) flag = true if (document.user.ah3.checked) flag = true if (document.user.ah4.checked) flag = true if (flag == false) { alert(“爱好至少选择其一”); return false; } 爱好: <INPUT TYPE="checkbox" NAME="ah1" value="读书">读书 <INPUT TYPE="checkbox" NAME="ah2" value="上网">上网 <INPUT TYPE="checkbox" NAME="ah3" value="看电视">看电视 <INPUT TYPE="checkbox" NAME="ah4" value="旅游">旅游

数据有效性验证实例（5） if (document.user.job.selectedIndex == 0) { alert("请选择职业!") document.user.job.focus() return false } 职业: <SELECT NAME="job"> <option>--请选择--</option> <option value="教师">教师</option> <option value="医生">医生</option> <option value="律师">律师</option> <option value="其他">其他</option> </SELECT>

数据有效性验证实例（6） if (document.user.email.value==“”){......} if (document.user.email.value.indexOf("@")==-1 || document.user.email.value.indexOf(".")==-1) { alert("错误的邮件地址") document.user.email.focus() return false }

数据有效性验证实例（7） function isNumber(str) { var tempchar,i for(i=0;i<str.length;i++) { tempchar = str.charAt(i) if ("0123456789".indexOf(tempchar)==-1) { return false } } return true }

End心蕊设计http://xin126.cn/

JavaScript 语言 4 学习交流网站：心蕊设计 xin126/