简易的检测注册表单的输入
<!DOCTYPE html> <html> <head> <title>Register.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style> .tb1 { width: 80px; text-align: right; } .tb2 { width: 150px; } #s1, #s2, #s3, #s4 { font-size: 12px; color: red; } </style> <script> function check() { var s1 = document.getElementById("s1"); var s2 = document.getElementById("s2"); var s3 = document.getElementById("s3"); var s4 = document.getElementById("s4"); //下列文本的初始化是有必要的，不然改正输入之后警告提示依然在显示 s1.innerText = ""; s2.innerText = ""; s3.innerText = ""; s4.innerText = ""; var f1 = document.forms[0]; if(f1.user.value.length < 3 || f1.user.value.length > 6) { s1.innerText = "用户名必须是3到6位"; return false; } if(f1.pwd1.value.length < 6 || f1.pwd2.value.length > 16) { s2.innerText = "密码必须在6到16位之间"; return false; } if(f1.pwd1.value != f1.pwd2.value) { s3.innerText = "两次密码输入不一致"; return false; } return true; } //重置时清除警告提示 function init() { var s1 = document.getElementById("s1"); var s2 = document.getElementById("s2"); var s3 = document.getElementById("s3"); var s4 = document.getElementById("s4"); s1.innerText = ""; s2.innerText = ""; s3.innerText = ""; s4.innerText = ""; } </script> </head> <body> <h1>用户注册</h1> <table> <form action=""> <tr> <td class="tb1">用户名:</td> <td> <input type="text" name="user" class="tb2"> <span id="s1"></span> </td> </tr> <tr> <td class="tb1">密码:</td> <td> <input type="password" name="pwd1" class="tb2"> <span id="s2"></span> </td> </tr> <tr> <td class="tb1">确认:</td> <td> <input type="password" name="pwd2" class="tb2"> <span id="s3"></span> </td> </tr> <tr> <td class="tb1">邮箱:</td> <td> <input type="text" name="mail" class="tb2"> <span id="s4"></span> </td> </tr> <tr> <td class="tb1"> <input type="submit" value="提交" onclick="return check()"> </td> <td> <input type="reset" value="重置" onclick="init()"> </td> </tr> </form> </table> </body> </html>
img两个关于加载的属性加载失败onerror与加载成功onload
<!DOCTYPE html> <html> <head> <title>LoadImg.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script> //图片加载成功调用 function load2() { document.getElementById("sp").innerText = "success!"; } //图片加载失败调用 function load1() { document.getElementById("sp").innerText = "fail!"; } </script> </head> <body> <img src="1.jpg" onerror="load1()" onload="load2()"> <span id="sp"></span> </body> </html>
操作表格
<!DOCTYPE html> <html> <head> <title>Table.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script> function test1() { //取出所有行 var rows = document.getElementById("tb").rows; var s1 = document.getElementById("s1"); if(s1.innerText == "行：") { for(var i=0; i<rows.length; i++) { var eachRow = rows[i]; //取出对应行 for(var j=0; j<eachRow.cells.length; j++) { //注意j的控制条件是一行中的列数 s1.innerText += eachRow.cells[j].innerText; //取出每行中的每个格子 } } }else { s1.innerText = "行："; } } function test2() { var tb = document.getElementById("tb"); tb.deleteRow(1); } function test3() { var tb = document.getElementById("tb"); var tableRow = tb.insertRow(1); //插入到指定行 tableRow.insertCell(0).innerText = "1"; //给每行的每个格子填充内容 tableRow.insertCell(1).innerText = "及时雨"; tableRow.insertCell(2).innerText = "宋江"; } function add() { var tb = document.getElementById("tb"); var info1 = ""; var info2 = ""; var info3 = ""; info1 = document.getElementById("info1").value; info2 = document.getElementById("info2").value; info3 = document.getElementById("info3").value; if(info1 == "" || info2 == "" || info3 == "") { alert("信息不能为空!"); return; } for(var i=1; i<tb.rows.length; i++) { var eachRow = tb.rows[i]; if(eachRow.cells[0].innerText == info1) { alert("该编号已存在!"); s2.innerText = eachRow.cells[0].innerText; return; } } var tableRow = tb.insertRow(tb.rows.length); tableRow.insertCell(0).innerText = info1; tableRow.insertCell(1).innerText = info2; tableRow.insertCell(2).innerText = info3; } </script> </head> <body> <h1>英雄排行榜</h1> <table id="tb" border="1" style="text-align: center"> <tr> <th>排行</th> <th>别称</th> <th>姓名</th> </tr> <tr> <td>1</td> <td>及时雨</td> <td>宋江</td> </tr> <tr> <td>2</td> <td>玉麒麟</td> <td>卢俊义</td> </tr> <tr> <td>3</td> <td>智多星</td> <td>吴用</td> </tr> </table> <input type="button" value="Rows" onclick="test1()"><br> <span id="s1">行：</span><br> <input type="button" value="Delete" onclick="test2()"> <input type="button" value="Insert" onclick="test3()"><br> <h1>添加成员</h1> 排名：<input type="text" id="info1"><br> 外号：<input type="text" id="info2"><br> 姓名：<input type="text" id="info3"><br> <input type="button" value="Add" onclick="add()"><br> </body> </html>
