Javascript
Javascript包含3部分语法:
1. 基础语法
2. BOM
3. DOM
调试: 打印, 删一段改一段
工具--internet选项--高级--取消勾选:禁用脚本调试, 打钩: 显示每个脚本错误的通知.
- 1. JS写在head里:
<html>
<head>
<title>My first JavaScript!</title>
<script type="text/javascript">
alert("Hello,JavaScript!");
alert("OK");
</script>
</head>
<body>
<br>
第一个JavaScript
</body>
</html>
- 2. 外部引入js文件:
<html> <head> <title> JavaScript 的位置! </title> <script language="JavaScript" src="22222.js"></script> </head> <body> <br> 从外部引入JavaScript <br> <br> </body> </html>
js文件:
alert("从文件外引入JS");
- 3. 在body里出现:
<html>
<head>
<title>JavaScript 的位置!</title>
</head>
<body>
<br>
This is a normal HTML document.
<br>
<script language="javascript">
document.write("<b>gfsdgjsdflgjlsdfjglkdsfjgljsdfl;j </b>")
</script>
<br>
Back in HTML again.
</body>
</html>
- 4. 不同的script的方法和变量可以共享:
<html> <head> <title>几个JavaScript</title> <Script Language="JavaScript"> var greeting; greeting = "Welcome to the JS!"; </Script> </head> <body> <Script language="JavaScript"> document.write(greeting); </Script> </body> </html>
变量和数组:
array的长度定义后没用, 可以超出界限
<html>
<head>
<title> JavaScript数组 </title>
<Script Language="JavaScript">
var arr = new Array(3);
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
arr[3] = 4;
arr["rrr"] = 4090;
</Script>
</head>
<body>
<Script language="JavaScript">
//document.write(arr["rrr"]);
//document.write(arr.length);
for(var o in arr) {
//document.write(o);
document.write(arr[o]);
}
</Script>
</body>
</html>
算数运算
<html> <head> <title> 算术运算 </title> <Script Language="JavaScript"> var result; result = 3+3; </Script> </head> <body> <Script language="JavaScript"> document.write(result); </Script> </body> </html>
逻辑运算:
<html> <head> <title> 几个JavaScript </title> <Script Language="JavaScript"> var result1,result2,result3; result1 = true&&false; result2 = true||false; result3 = !true; </Script> </head> <body> <Script language="JavaScript"> document.write(result1+"<Br>"); document.write(result2+"<Br>"); document.write(result3); </Script> </body> </html>
字符串连接:
<html> <head> <title> 几个JavaScript </title> <Script Language="JavaScript"> var greeting,h; greeting = "Welcome to the JS!"; h = "This is a magic world!"; </Script> </head> <body> <Script language="JavaScript"> document.write(greeting+h); </Script> </body> </html>
字符串的子集: 结果 come to
<html> <head> <title> 字符串子集 </title> <Script Language="JavaScript"> var greeting; greeting = "Welcome to the JS!"; </Script> </head> <body> <Script language="JavaScript"> document.write(greeting.substring(3,10)); </Script> </body> </html>
条件操作:
<html> <head> <title> 条件操作 </title> <Script Language="JavaScript"> var result1,result2; result1 = (3>4)?"Y":"N"; </Script> </head> <body> <Script language="JavaScript"> document.write(result1); </Script> </body> </html>
条件操作:
<html>
<head>
<title>
条件操作
</title>
</head>
<body>
<Script language="JavaScript">
var today = new Date();
var hour = today.getHours();
if(hour<12)
{
document.write("Good Morning");
}
else if(hour == 12)
{
document.write("Good Noon!");
}
else
{
document.write("Good Afternoon!");
}
</Script>
</body>
</html>
循环:
<html>
<head>
<title>
while
</title>
</head>
<body>
<Script language="JavaScript">
var i = 1;
while(i<10)
{
document.write(i+"<br>");
i++;
}
</Script>
</body>
</html>
switch:
<html>
<head>
<title>
switch
</title>
</head>
<body>
<Script language="JavaScript">
var hour = 9;
switch(hour)
{
case 1:
document.write("Good Morning");
break;
case 2:
document.write("Good Noon!");
break;
case 3:
document.write("Good Afternoon!");
break;
default:
document.write("Hello!");
}
</Script>
</body>
</html>
数组循环:
<html>
<head>
<title>
switch
</title>
</head>
<body>
<Script language="JavaScript">
var arr = new Array(2,3,4,5);
for(i=0;i<arr.length;i++)
{
document.write(arr[i]+"<br>");
}
</Script>
</body>
</html>
字符串循环输出:
<html>
<head>
<title>
switch
</title>
</head>
<body>
<Script language="JavaScript">
//var found = false;
var str = "Hello World!I am JavaScript.";
var i=0;
while(i<str.length)
{
document.write(str.charAt(i)+"<br>");
i++;
}
</Script>
</body>
</html>
函数:
<html>
<head>
<title> 函数</title>
<Script language="JavaScript">
function test()
{
document.write("a");
document.write("b");
}
</Script>
</head>
<body>
<Script language="JavaScript">
test();
</Script>
</body>
</html>
函数带参数:
<html>
<head>
<title> 函数 </title>
<Script language="JavaScript">
function test(a)
{
document.write(a);
}
</Script>
</head>
<body>
<Script language="JavaScript">
test("Hey Jude!");
</Script>
</body>
</html>
函数计算: 带返回值的
<html>
<head>
<title>
函数
</title>
<Script language="JavaScript">
function test(y)
{
return y*3.14;
}
</Script>
</head>
<body>
<Script language="JavaScript">
document.write(test(12.3));
</Script>
</body>
</html>
***事件处理***
onFocus: 在用户为了输入而选择的select, text, textarea等:
<html> <head> </head> <body> <form name="test"> <input type="text" name="userName" value="SXT" onFocus="JavaScript:alert(document.test.userName.value);"> </form> </body> </html>
onClick:
<html>
<head> </head>
<body>
<img src="xsd.jpg" onclick="alert('ok');"></img>
</body>
</html>
onload,一般写在body里:
<html>
<head>
</head>
<body onLoad="javascript:alert('hello');" onUnload="javascript:alert('bye-bye');">
nihao
</body>
</html>
onMouse:
<html>
<head>
</head>
<body>
<img id="image" src="xsd.jpg" onmouseover="alert('over')" onmouseout="alert('out')"></img>
</body>
</html>
<html>
<head>
</head>
<body>
<img id="image" src="xsd.jpg"
onmouseover="document.getElementById('image').style.border='5 double purple'"
onmouseout="document.getElementById('image').style.border=''"></img>
</body>
</html>
onSelect:
<html> <head></head> <body> <form name="test"> <input type="text" name="userName" value="SXT" onSelect="JavaScript:alert(document.test.userName.value);"> </form> </body> </html>
onSubmit:
<html>
<head>
<script type="text/javascript">
function check() {
if(document.test.t.value == "") {
alert("空串不允许");
return false;
}
if(document.test.t.value.length > 5) {
alert("太长");
document.test.t.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="test" action="1.htm" onsubmit="return check()">
<input type="text" name="t">
<input type="submit" value="ok">
</form>
</body>
</html>
onBlur:
<html> <head> </head> <body> <form name="test"> <input type="text" name="userName" value="SXT" onblur="JavaScript:alert(document.test.userName.value);"> </form> </body> </html>
onChange:
<html> <head> </head> <body> <form name="test"> <input type="text" name="userName" value="SXT" onChange="JavaScript:alert(document.test.userName.value);"> </form> </body> </html>
js的对话框: alert, prompt, confirm
alert:
<html>
<head>
<title>
函数
</title>
<Script language="JavaScript">
alert("Red Alert!");
</Script>
</head>
<body>
</body>
</html>
prompt:
<html>
<head>
<title>
函数
</title>
<Script language="JavaScript">
var userName = prompt("请输入你的名字:");
document.write("你好！"+userName);
</Script>
</head>
<body>
</body>
</html>
confirm:
<html>
<head>
<title>
函数
</title>
<Script language="JavaScript">
function confirmit()
{
if(confirm("你确认删除此文件么？"))
{
document.testa.submit();
}
}
</Script>
</head>
<body>
<form name="testa" action="ttt.jsp" method="post">
<input type="button" value="删除文件" onclick="JavaScript:confirmit()" name="aaa">
</form>
</body>
</html>
js的内置对象:
this, 当前对象
for..in, in后跟一个对象, 对此对象中的所有元素循环一次
with, 为一段代码建立一个缺省的对象, 任何无对象的属性引用, 都将使用该缺省的对象
new 生成一个新的对象
this:
<html>
<head>
<title>
函数
</title>
</head>
<body>
<img src="xsd.jpg" onclick="JavaScript:alert(this.src);">
<form name="ttt">
<input type="text" name="ddd" value="ddaaa" onclick="JavaScript:checkit(this)">
</form>
</body>
</html>
<Script language="JavaScript">
function checkit(obj)
{
if(obj.value=="")
{
alert("空值");
}
else
{
alert(obj.value);
}
}
</Script>
for...in
<html> <head>
<title> 函数 </title> </head> <body> <Script language="JavaScript"> a = new Array("alex","mark","sean","victor","lynn"); for(eee in a) { document.write(eee + "--"); document.write(a[eee]+"<br>"); } </Script> </body> </html>
结果:
0--alex 1--mark 2--sean 3--victor 4--lynn
with建立一个默认对象:
<html>
<head>
<title> 函数 </title>
</head>
<body>
<Script language="JavaScript">
with(document)
{
write("This is a default document action");
write("<br>");
write("<font color=\"red\">")
write("this is a default document action too");
write("</font>");
}
</Script>
</body>
</html>
new 生成一个新的对象:
<html> <head> <title> 函数 </title> </head> <body> <Script language="JavaScript"> var today = new Date(); alert(today.getDate()); //alert(new Date().getDate()); </Script> </body> </html>
BOM
窗口中的对象和元素
window: 当前窗口, 新开窗口, 通过本地窗口控制新开窗口
location: 获取或设置现有文档的URL
history:
先前访问过的URL的历史列表
常用方法, back(), go()
document:
当前的文档对象
document.write(): 想客户端浏览器输出内容
document.formName(): 可以用这个方法得到表单名称
document.referrer()
window:窗口控制: 状态栏显示文字, window.status
<html> <head> <title> 本地窗口 </title> </head> <body onload="window.status='Hello,Please look here!'"> <form name="ttt"> <input type="button" value="test" onMouseOver="window.status='haha';"> </form> </body> </html>
window.open:
<html>
<head>
<title> 新开窗口 </title>
</head>
<body>
<Script language="JavaScript">
window.open("1.htm","newWin","toolbar=no,left=200,top=100,menubar=no,width=100,height=100,resizable=no");
//window.open("1.htm","newWin","toolbar=no,left=200,top=100,menubar=no,width=100,height=100,resizable=no");
//window.open("1.htm");
</Script>
</body>
</html>
<html>
<head>
<title> 新开窗口 </title>
</head>
<body>
<Script language="JavaScript">
var abc = window.open("1.htm","newWin","toolbar=no,left=200,top=100,menubar=no,width=300,height=100");
</Script>
<input type="button" onclick="JavaScript:abc.focus();" value="跑前面来">
<input type="button" onclick="JavaScript:abc.close();" value="关闭">
</body>
</html>
两个一样的内容: 都显示出来当前目录
<html> <head> <title> 本地窗口</title> </head> <body> <Script language="JavaScript"> //alert(window.location); alert(document.location.href); </Script> </body> </html>
转向:
<html>
<head>
<title> 本地窗口 </title>
</head>
<body>
<Script language="JavaScript">
function go2()
{
window.location="33.htm";
}
</Script>
<input type="button" value="转向" onclick="JavaScript:go2()">
</body>
</html>
后退:
<html>
<head>
<title> 本地窗口 </title>
</head>
<body>
<Script language="JavaScript">
function goBack()
{
history.back();
}
</Script>
<input type="button" value="返回" onclick="JavaScript:goBack()">
</body>
</html>
实用js程序:
下拉菜单: 重点
<html>
<head>
<title>businessSell</title>
</head>
<body onLoad="changeDrop2()">
<script LANGUAGE="JavaScript">
function changeDrop2() {
if (document.form.Drop1.selectedIndex == 0) {
document.form.Drop2.length = 1;
document.form.Drop1.selectedIndex = 0
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "No Product Selected";
document.form.Drop2.options[0].value = "No Product Selected";
}
if (document.form.Drop1.selectedIndex == 1) {
document.form.Drop2.length = 9;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select Model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "Celebrity";
document.form.Drop2.options[1].value = "Celebrity";
document.form.Drop2.options[2].text = "Legend";
document.form.Drop2.options[2].value = "Legend";
document.form.Drop2.options[3].text = "Sundancer";
document.form.Drop2.options[3].value = "Sundancer";
document.form.Drop2.options[4].text = "SideKick";
document.form.Drop2.options[4].value = "SideKick";
document.form.Drop2.options[5].text = "Rally";
document.form.Drop2.options[5].value = "Rally";
document.form.Drop2.options[6].text = "Shuttle";
document.form.Drop2.options[6].value = "Shuttle";
document.form.Drop2.options[7].text = "Dynamo";
document.form.Drop2.options[7].value = "Dynamo";
document.form.Drop2.options[8].text = "XL";
document.form.Drop2.options[8].value = "XL";
}
if (document.form.Drop1.selectedIndex == 2) {
document.form.Drop2.length = 8;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "1100";
document.form.Drop2.options[1].value = "1100";
document.form.Drop2.options[2].text = "1103";
document.form.Drop2.options[2].value = "1103";
document.form.Drop2.options[3].text = "1105";
document.form.Drop2.options[3].value = "1105";
document.form.Drop2.options[4].text = "1115";
document.form.Drop2.options[4].value = "1115";
document.form.Drop2.options[5].text = "1120";
document.form.Drop2.options[5].value = "1120";
document.form.Drop2.options[6].text = "1170";
document.form.Drop2.options[6].value = "1170";
document.form.Drop2.options[7].text = "1400";
document.form.Drop2.options[7].value = "1400";
}
if (document.form.Drop1.selectedIndex == 3) {
document.form.Drop2.length = 12;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select Model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "TMR48";
document.form.Drop2.options[1].value = "TMR48";
document.form.Drop2.options[2].text = "TMR49";
document.form.Drop2.options[2].value = "TMR49";
document.form.Drop2.options[3].text = "TMR348";
document.form.Drop2.options[3].value = "TMR348";
document.form.Drop2.options[4].text = "TMR329";
document.form.Drop2.options[4].value = "TMR329";
document.form.Drop2.options[5].text = "TMR540";
document.form.Drop2.options[5].value = "TMR540";
document.form.Drop2.options[6].text = "TMR360";
document.form.Drop2.options[6].value = "TMR360";
document.form.Drop2.options[7].text = "TMR470";
document.form.Drop2.options[7].value = "TMR470";
document.form.Drop2.options[8].text = "TMR570/571";
document.form.Drop2.options[8].value = "TMR570/571";
document.form.Drop2.options[9].text = "TMR580";
document.form.Drop2.options[9].value = "TMR580";
document.form.Drop2.options[10].text = "TMR670";
document.form.Drop2.options[10].value = "TMR670";
document.form.Drop2.options[11].text = "TMR560";
document.form.Drop2.options[11].value = "TMR560";
}
if (document.form.Drop1.selectedIndex == 4) {
document.form.Drop2.length = 3;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select Model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "Wrangler";
document.form.Drop2.options[1].value = "Wrangler";
document.form.Drop2.options[2].text = "Hurricane";
document.form.Drop2.options[2].value = "Hurricane";
}
if (document.form.Drop1.selectedIndex == 5) {
document.form.Drop2.length = 3;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select Model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "2000";
document.form.Drop2.options[1].value = "2000";
document.form.Drop2.options[2].text = "3000";
document.form.Drop2.options[2].value = "3000";
}
}
function goThere() {
if (document.form.Drop1.selectedIndex == 0) {
alert("Please Select a Product");
} else {
if (document.form.Drop2.selectedIndex == 0) {
alert("Please Select a Model");
} else {
var list1 = document.form.Drop1;
var list2 = document.form.Drop2;
var theDIR = list1.options[list1.selectedIndex].value;
var theProduct = document.form.Drop2.options[list2.selectedIndex].value;
location.href = "http://www.YourLinkHere.com/" + theDIR + "/" + theProduct + ".htm";
}
}
}
</script>
<form name="form">
<p><select name="Drop1" onChange="changeDrop2()" size="1">
<option selected value="Select A Product">Select A Product</option>
<option value="Scooters">Scooters</option>
<option value="Jazzy">Jazzy</option>
<option value="LiftChairs">Lift Chairs</option>
<option value="PMVs">PMV's</option>
<option value="Hercules">Hercules</option>
</select><br>
<select name="Drop2" size="1">
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
</select><br>
<input type="button" onClick="goThere()" value="GOTO Product Page" name="B1"></p>
</form>
<xmp>
<html>
<head>
<title>businessSell</title>
</head>
<body onLoad="changeDrop2()">
<script LANGUAGE="JavaScript">
function changeDrop2() {
if (document.form.Drop1.selectedIndex == 0) {
document.form.Drop2.length = 1;
document.form.Drop1.selectedIndex = 0
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "No Product Selected";
document.form.Drop2.options[0].value = "No Product Selected";
}
if (document.form.Drop1.selectedIndex == 1) {
document.form.Drop2.length = 9;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select Model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "Celebrity";
document.form.Drop2.options[1].value = "Celebrity";
document.form.Drop2.options[2].text = "Legend";
document.form.Drop2.options[2].value = "Legend";
document.form.Drop2.options[3].text = "Sundancer";
document.form.Drop2.options[3].value = "Sundancer";
document.form.Drop2.options[4].text = "SideKick";
document.form.Drop2.options[4].value = "SideKick";
document.form.Drop2.options[5].text = "Rally";
document.form.Drop2.options[5].value = "Rally";
document.form.Drop2.options[6].text = "Shuttle";
document.form.Drop2.options[6].value = "Shuttle";
document.form.Drop2.options[7].text = "Dynamo";
document.form.Drop2.options[7].value = "Dynamo";
document.form.Drop2.options[8].text = "XL";
document.form.Drop2.options[8].value = "XL";
}
if (document.form.Drop1.selectedIndex == 2) {
document.form.Drop2.length = 8;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "1100";
document.form.Drop2.options[1].value = "1100";
document.form.Drop2.options[2].text = "1103";
document.form.Drop2.options[2].value = "1103";
document.form.Drop2.options[3].text = "1105";
document.form.Drop2.options[3].value = "1105";
document.form.Drop2.options[4].text = "1115";
document.form.Drop2.options[4].value = "1115";
document.form.Drop2.options[5].text = "1120";
document.form.Drop2.options[5].value = "1120";
document.form.Drop2.options[6].text = "1170";
document.form.Drop2.options[6].value = "1170";
document.form.Drop2.options[7].text = "1400";
document.form.Drop2.options[7].value = "1400";
}
if (document.form.Drop1.selectedIndex == 3) {
document.form.Drop2.length = 12;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select Model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "TMR48";
document.form.Drop2.options[1].value = "TMR48";
document.form.Drop2.options[2].text = "TMR49";
document.form.Drop2.options[2].value = "TMR49";
document.form.Drop2.options[3].text = "TMR348";
document.form.Drop2.options[3].value = "TMR348";
document.form.Drop2.options[4].text = "TMR329";
document.form.Drop2.options[4].value = "TMR329";
document.form.Drop2.options[5].text = "TMR540";
document.form.Drop2.options[5].value = "TMR540";
document.form.Drop2.options[6].text = "TMR360";
document.form.Drop2.options[6].value = "TMR360";
document.form.Drop2.options[7].text = "TMR470";
document.form.Drop2.options[7].value = "TMR470";
document.form.Drop2.options[8].text = "TMR570/571";
document.form.Drop2.options[8].value = "TMR570/571";
document.form.Drop2.options[9].text = "TMR580";
document.form.Drop2.options[9].value = "TMR580";
document.form.Drop2.options[10].text = "TMR670";
document.form.Drop2.options[10].value = "TMR670";
document.form.Drop2.options[11].text = "TMR560";
document.form.Drop2.options[11].value = "TMR560";
}
if (document.form.Drop1.selectedIndex == 4) {
document.form.Drop2.length = 3;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select Model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "Wrangler";
document.form.Drop2.options[1].value = "Wrangler";
document.form.Drop2.options[2].text = "Hurricane";
document.form.Drop2.options[2].value = "Hurricane";
}
if (document.form.Drop1.selectedIndex == 5) {
document.form.Drop2.length = 3;
document.form.Drop2.selectedIndex = 0
document.form.Drop2.options[0].text = "Select Model";
document.form.Drop2.options[0].value = "Select Model";
document.form.Drop2.options[1].text = "2000";
document.form.Drop2.options[1].value = "2000";
document.form.Drop2.options[2].text = "3000";
document.form.Drop2.options[2].value = "3000";
}
}
function goThere() {
if (document.form.Drop1.selectedIndex == 0) {
alert("Please Select a Product");
} else {
if (document.form.Drop2.selectedIndex == 0) {
alert("Please Select a Model");
} else {
var list1 = document.form.Drop1;
var list2 = document.form.Drop2;
var theDIR = list1.options[list1.selectedIndex].value;
var theProduct = document.form.Drop2.options[list2.selectedIndex].value;
location.href = "http://www.YourLinkHere.com/" + theDIR + "/" + theProduct + ".htm";
}
}
}
</script>
<form name="form">
<p><select name="Drop1" onChange="changeDrop2()" size="1">
<option selected value="Select A Product">Select A Product</option>
<option value="Scooters">Scooters</option>
<option value="Jazzy">Jazzy</option>
<option value="LiftChairs">Lift Chairs</option>
<option value="PMVs">PMV's</option>
<option value="Hercules">Hercules</option>
</select><br>
<select name="Drop2" size="1">
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
<option value=" ">-----------------------------</option>
</select><br>
<input type="button" onClick="goThere()" value="GOTO Product Page" name="B1"></p>
</form>
</body>
</html>
</xmp>
</body>
</html>
判断:
<html>
<head>
<title> 表单验证 </title>
</head>
<body>
<Script language="JavaScript" src="pd.js">
</Script>
<Script language="JavaScript">
function check()
{
alert(onlynumber(document.test.a.value));
}
</Script>
<form name="test">
<input type="text" name="a">
<input type="button" value="返回" onclick="JavaScript:check()">
</form>
</body>
</html>
调用的pd.js:
//输入判断js函数
//'*********************************************************
// ' Purpose: 判断输入是否为整数字
// ' Inputs: String
// ' Returns: True, False
//'*********************************************************
function onlynumber(str)
{
var i,strlength,tempchar;
str=CStr(str);
if(str=="") return false;
strlength=str.length;
for(i=0;i<strlength;i++)
{
tempchar=str.substring(i,i+1);
if(!(tempchar==0||tempchar==1||tempchar==2||tempchar==3||tempchar==4||tempchar==5||tempchar==6||tempchar==7||tempchar==8||tempchar==9))
{
//alert("只能输入数字 ");
return false;
}
}
return true;
}
//'*********************************************************
//'*********************************************************
// ' Purpose: 判断输入是否为数值(包括小数点)
// ' Inputs: String
// ' Returns: True, False
//'*********************************************************
function IsFloat(str)
{ var tmp;
var temp;
var i;
tmp =str;
if(str=="") return false;
for(i=0;i<tmp.length;i++)
{temp=tmp.substring(i,i+1);
if((temp>='0'&& temp<='9')||(temp=='.')){} //check input in 0-9 and '.'
else { return false;}
}
return true;
}
//'*********************************************************
// ' Purpose: 判断输入是否为电话号码
// ' Inputs: String
// ' Returns: True, False
//'*********************************************************
function isphonenumber(str)
{
var i,strlengh,tempchar;
str=CStr(str);
if(str=="") return false;
strlength=str.length;
for(i=0;i<strlength;i++)
{
tempchar=str.substring(i,i+1);
if(!(tempchar==0||tempchar==1||tempchar==2||tempchar==3||tempchar==4||tempchar==5||tempchar==6||tempchar==7||tempchar==8||tempchar==9||tempchar=='-'))
{
//alert("电话号码只能输入数字和中划线 ");
return false;
}
}
return true;
}
//'*********************************************************
//'*********************************************************
// ' Purpose: 判断输入是否为Email
// ' Inputs: String
// ' Returns: True, False
//'*********************************************************
function isemail(str)
{
var bflag=true
if (str.indexOf("'")!=-1) {
bflag=false
}
if (str.indexOf("@")==-1) {
bflag=false
}
else if(str.charAt(0)=="@"){
bflag=false
}
return bflag
}
//'*********************************************************
// ' Purpose: 判断输入是否含有为中文
// ' Inputs: String
// ' Returns: True, False
//'*********************************************************
function IsChinese(str)
{
if(escape(str).indexOf("%u")!=-1)
{
return true;
}
return false;
}
//'*********************************************************
//'*********************************************************
// ' Purpose: 判断输入是否含有空格
// ' Inputs: String
// ' Returns: True, False
//'*********************************************************
function checkblank(str)
{
var strlength;
var k;
var ch;
strlength=str.length;
for(k=0;k<=strlength;k++)
{
ch=str.substring(k,k+1);
if(ch==" ")
{
//alert("对不起 不能输入空格 ");
return false;
}
}
return true;
}
//'*********************************************************
//'*********************************************************
// ' Purpose: 去掉Str两边空格
// ' Inputs: Str
// ' Returns: 去掉两边空格的Str
//'*********************************************************
function trim(str)
{
var i,strlength,t,chartemp,returnstr;
str=CStr(str);
strlength=str.length;
t=str;
for(i=0;i<strlength;i++)
{
chartemp=str.substring(i,i+1);
if(chartemp==" ")
{
t=str.substring(i+1,strlength);
}
else
{
break;
}
}
returnstr=t;
strlength=t.length;
for(i=strlength;i>=0;i--)
{
chartemp=t.substring(i,i-1);
if(chartemp==" ")
{
returnstr=t.substring(i-1,0);
}
else
{
break;
}
}
return (returnstr);
}
//'*********************************************************
//'*********************************************************
// ' Purpose: 将数值类型转化为String
// ' Inputs: int
// ' Returns: String
//'*********************************************************
function CStr(inp)
{
return(""+inp+"");
}
//'*********************************************************
//'*********************************************************
// ' Purpose: 去除不合法字符, ' " < >
// ' Inputs: String
// ' Returns: String
//'*********************************************************
function Rep(str)
{var str1;
str1=str;
str1=replace(str1,"'","`",1,0);
str1=replace(str1,'"',"`",1,0);
str1=replace(str1,"<","(",1,0);
str1=replace(str1,">",")",1,0);
return str1;
}
//'*********************************************************
//'*********************************************************
// ' Purpose: 替代字符
// ' Inputs: 目标String,欲替代的字符,替代成为字符串,大小写是否敏感,是否整字代替
// ' Returns: String
//'*********************************************************
function replace(target,oldTerm,newTerm,caseSens,wordOnly)
{ var wk ;
var ind = 0;
var next = 0;
wk=CStr(target);
if (!caseSens)
{
oldTerm = oldTerm.toLowerCase();
wk = target.toLowerCase();
}
while ((ind = wk.indexOf(oldTerm,next)) >= 0)
{
if (wordOnly)
{
var before = ind - 1;
var after = ind + oldTerm.length;
if (!(space(wk.charAt(before)) && space(wk.charAt(after))))
{
next = ind + oldTerm.length;
continue;
}
}
target = target.substring(0,ind) + newTerm + target.substring(ind+oldTerm.length,target.length);
wk = wk.substring(0,ind) + newTerm + wk.substring(ind+oldTerm.length,wk.length);
next = ind + newTerm.length;
if (next >= wk.length) { break; }
}
return target;
}
//'*********************************************************
用户验证: 重要!!!用onblur, document.getElementById("pwdErr").innerHTML 替换alert方式
<html> <head> <title>表单</title> <script language=JavaScript src="script/regcheckdata.js"></script> <script type="text/javascript"> </script> </head> <body> <form name="form" action="01.html" method="get" onSubmit="return checkdata()"> <table width="750" align="center" border="2"> <tr> <td colspan="2" align="center">用户注册</td> </tr> <tr> <td>用户名：</td> <td> <input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())"> <!--<div id="usernameErr"></div>--> <span id="usernameErr"></span> </td> </tr> <tr> <td>密码：</td> <td> <input type=password name="pwd" size="15" maxlength="12" onblur="checkdata()"> <span id="pwdErr"></span> </td> </tr> <tr> <td>密码确认</td> <td> <input type=password name="pwd2" size="15" maxlength="12" onblur="checkdata()"> <span id="pwdCheckErr"></span> </td> </tr> <tr> <td>性别</td> <td> <input type=radio name="sex" value="male" onblur="checkdata()">男 <input type=radio name="sex" value="female" onblur="checkdata()">女 <span id="sexErr"></span> </td> </tr> <tr> <td>你感兴趣</td> <td> <input type="checkbox" name="interest" value="vc" checked>VC <input type="checkbox" name="interest" value="vb">VB <input type="checkbox" name="interest" value="vfoxpro">VF <input type="checkbox" name="interest" value="vjava">VJ <br> <input type="checkbox" name="interest" value="bc">BC <input type="checkbox" name="interest" value="cobol">CO <input type="checkbox" name="interest" value="java">JA <input type="checkbox" name="interest" value="delphi">Delphi </td> </tr> <!--必须选中JSP--> <input type="hidden" name="interest" value="jsp"> <tr> <td>你感兴趣</td> <td> <select name="interest2" size=8 multiple> <option value="vc" selected>VC</option> <option value="vb">VB</option> <option value="vfoxpro">VF</option> <option value="vjava">VJ</option> <option value="bc">BC</option> <option value="cobol">CO</option> <option value="java">JA</option> <option value="delphi">Delphi</option> </select> </td> </tr> <tr> <td>你来自</td> <td> <select name="province" onblur="checkdata()"> <option value=0 selected>请选择</option> <option value=34>安徽</option> <option value=11>北京</option> <option value=50>重庆</option> <option value=35>福建</option> <option value=62>甘肃</option> <option value=44>广东</option> <option value=45>广西</option> <option value=52>贵州</option> <option value=46>海南</option> <option value=13>河北</option> <option value=23>黑龙江</option> <option value=41>河南</option> <option value=42>湖北</option> <option value=43>湖南</option> <option value=32>江苏</option> <option value=36>江西</option> <option value=22>吉林</option> <option value=21>辽宁</option> <option value=64>宁夏</option> <option value=15>内蒙古</option> <option value=63>青海</option> <option value=31>上海</option> <option value=14>山西</option> <option value=37>山东</option> <option value=51>四川</option> <option value=61>陕西</option> <option value=12>天津</option> <option value=54>西藏</option> <option value=65>新疆</option> <option value=53>云南</option> <option value=33>浙江</option> <option value=71>台湾</option> <option value=81>香港</option> <option value=82>澳门</option> <option value=0>其他</option> </select> <span id="provErr"></span> </td> </tr> <tr> <td>自我介绍</td> <td> <textarea rows="12" cols="80" name="intro" onblur="checkdata()"></textarea> <span id="introErr"></span> </td> </tr> <tr> <td></td> <td> <input type="submit" value="提交"> <input type="reset" value="重置"> </td> </tr> </table> </form> </body> </html>
js文件:
function checkdata() {
var ssn=form.username.value.toLowerCase();
if (!checkUserName(ssn)) return false; //用户名检查
if( strlen(form.pwd.value)<6 || strlen(form.pwd.value)>16 ) {
//alert("\正确地登录密码长度为6-16位，仅可用英文、数字、特殊字符！")
document.getElementById("pwdErr").innerHTML = "<font color='red'>正确地登录密码长度为6-16位，仅可用英文、数字、特殊字符！</font>";
form.pwd.focus()
return false;
}
if( strlen2(form.pwd.value) ) {
//alert("\您的密码中包含了非法字符，仅可用英文、数字、特殊字符！")
document.getElementById("pwdErr").innerHTML = "<font color='red'>您的密码中包含了非法字符，仅可用英文、数字、特殊字符！</font>";
form.pwd.focus()
return false;
}
if( form.pwd.value == form.username.value ) {
//alert("\用户名和密码不能相同！")
document.getElementById("pwdErr").innerHTML = "<font color='red'>用户名和密码不能相同！</font>";
form.pwd.focus()
return false;
}
document.getElementById("pwdErr").innerHTML = "";
if( form.pwd2.value =="" ) {
//alert("\请输入密码确认！")
document.getElementById("pwdCheckErr").innerHTML = "<font color='red'>请输入密码确认！</font>";
form.pwd2.focus()
return false;
}
if( form.pwd2.value != form.pwd.value ) {
//alert("\两次密码输入不一致！")
document.getElementById("pwdCheckErr").innerHTML = "<font color='red'>两次密码输入不一致！</font>";
form.pwd.focus()
return false;
}
document.getElementById("pwdCheckErr").innerHTML = "";
//检查性别
if( !(form.sex[0].checked || form.sex[1].checked) ) {
//alert("请选择性别!");
document.getElementById("sexErr").innerHTML = "<font color='red'>请选择性别!</font>";
form.sex[0].focus();
return false;
}
document.getElementById("sexErr").innerHTML = "";
//检查省份
if( form.province.selectedIndex == 0 ) {
//alert("请选择省份!");
document.getElementById("provErr").innerHTML = "<font color='red'>请选择省份!</font>";
form.province.focus();
return false;
}
document.getElementById("provErr").innerHTML = "";
/*
if( form.question.value == "") {
alert("\请输入提示问题,当您忘记密码时可根据该问题提示密码！")
form.question.focus()
return false;
}
if( strlen(form.answer.value)<6) {
alert("\请重新输入问题答案，长度不少于6位！")
form.answer.focus()
return false;
}
if( form.question.value == form.answer.value ) {
alert("\密码提示问题和答案不能相同！")
form.answer.focus()
return false;
}
if( strlen(form.pingma.value)<6 || strlen(form.pingma.value)>16 ) {
alert("\正确的安全码长度为6-16位，仅可用英文、数字、特殊字符！")
form.pingma.focus()
return false;
}
if( strlen2(form.pingma.value) ) {
alert("\您的安全码中包含了非法字符，仅可用英文、数字、特殊字符！")
form.pingma.focus()
return false;
}
if( form.pingma.value == form.username.value ) {
alert("\用户名和安全码不能相同！")
form.pingma.focus()
return false;
}
if( form.pingma2.value =="" ) {
alert("\请输入安全码确认！")
form.pingma2.focus()
return false;
}
if( form.pingma.value != form.pingma2.value ) {
alert("\两次安全码输入不一致！")
form.pingma.focus()
return false;
}*/
if(form.intro.value == "") {
//alert("\自我介绍不能为空!");
document.getElementById("introErr").innerHTML = "<font color='red'>自我介绍不能为空!</font>";
form.intro.focus();
return false;
}
document.getElementById("introErr").innerHTML = "";
return true;
}
function checkUserName(ssn){
if( ssn.length<3 || ssn.length>18 ) {
//alert("\请输入正确的用户名,用户名长度为3-18位！")
document.getElementById("usernameErr").innerHTML = "<font color='red'>请输入正确的用户名,用户名长度为3-18位！</font>";
form.username.focus()
return false;
}
if (isWhiteWpace(ssn)){
//alert("\请输入正确的用户名,用户名中不能包含空格！")
document.getElementById("usernameErr").innerHTML = "<font color='red'>请输入正确的用户名,用户名中不能包含空格！</font>";
form.username.focus()
return false;
}
if (!isSsnString(ssn)){
//alert("\ 对不起，您选择的用户名不正确或已被占用！用户名\n由a～z的英文字母(不区分大小写)、0～9的数字、点、减\n号或下划线组成，长度为3～18个字符，只能以数字或字母\n开头和结尾,例如:kyzy_001。")
document.getElementById("usernameErr").innerHTML = "<font color='red'>对不起，您选择的用户名不正确或已被占用！用户名\n由a～z的英文字母(不区分大小写)、0～9的数字、点、减\n号或下划线组成，长度为3～18个字符，只能以数字或字母\n开头和结尾,例如:kyzy_001。</font>";
form.username.focus()
return false;
}
document.getElementById("usernameErr").innerHTML = "";
return true;
}
function strlen(str){
var len;
var i;
len = 0;
for (i=0;i<str.length;i++){
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}
function strlen2(str){
var len;
var i;
len = 0;
for (i=0;i<str.length;i++){
if (str.charCodeAt(i)>255) return true;
}
return false;
}
function isWhiteWpace (s)
{
var whitespace = " \t\n\r";
var i;
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (whitespace.indexOf(c) >= 0) {
return true;
}
}
return false;
}
function isSsnString (ssn)
{
var re=/^[0-9a-z][\w-.]*[0-9a-z]$/i;
if(re.test(ssn))
return true;
else
return false;
}
function checkssn(gotoURL) {
var ssn=form.username.value.toLowerCase();
if (checkUserName(ssn)){
var open_url = gotoURL + "?username=" + ssn;
window.open(open_url,'','status=0,directories=0,resizable=0,toolbar=0,location=0,scrollbars=0,width=322,height=200');
}
}
