1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 function focus_username() 8 { 9 document.getElementById("user_res").innerHTML = "<font color='#f00'>请输入用户名</font>"; 10 } 11 function blur_username() 12 { 13 var user_value = document.getElementsByName("username")[0].value; 14 if(user_value.length === 0) 15 { 16 document.getElementById("user_res").innerHTML = "<font color='#f00'>您没有输入用户名</font>"; 17 return false; 18 } 19 else if(user_value.length < 5 || user_value.length > 18) 20 { 21 document.getElementById("user_res").innerHTML = "<font color='#f00'>用户名长度必须在5~18位之间</font>"; 22 return false; 23 } 24 else if(!checkUser(user_value)) 25 { 26 document.getElementById("user_res").innerHTML = "<font color='#f00'>用户名中含特殊符号</font>"; 27 return false; 28 } 29 else 30 { 31 document.getElementById("user_res").innerHTML = "<font color='#00f'>用户名合法</font>"; 32 return true; 33 } 34 } 35 function focus_password() 36 { 37 document.getElementById("pass_res").innerHTML = "<font color='#00f'>请输入密码</font>"; 38 } 39 40 function blur_password() 41 { 42 var pass_value = document.getElementsByName("password")[0].value; 43 if(pass_value.length === 0) 44 { 45 document.getElementById("pass_res").innerHTML = "<font color='#f00'>您没有输入密码</font>"; 46 return false; 47 } 48 else if(pass_value.length < 5 || pass_value.length > 18) 49 { 50 document.getElementById("pass_res").innerHTML = "<font color='#f00'>用户名长度必须在5~18位之间</font>"; 51 return false; 52 } 53 else 54 { 55 document.getElementById("pass_res").innerHTML = "<font color='#f00'>密码合法</font>"; 56 return true; 57 } 58 } 59 60 function checkUser(user) 61 { 62 var arr = ["<",">","#","?","%","!","~","^","&","$"]; 63 var arr_length = arr.length; 64 var user_length = user.length; 65 66 for(var i=0;i<arr_length;i++) 67 { 68 for(var j=0;j<user_length;j++) 69 { 70 if(arr[i] === user.charAt(j)) 71 { 72 return false; 73 } 74 } 75 } 76 return true; 77 } 78 79 function checkForm() 80 { 81 var user_flag = blur_username(); 82 var pass_flag = blur_password(); 83 if(user_flag && pass_flag) 84 { 85 alert("表单验证通过"); 86 return true; 87 } 88 else 89 { 90 alert("表单验证不通过"); 91 return false; 92 } 93 } 94 </script> 95 </head> 96 <body> 97 <form name='form1' onsubmit='return checkForm()' action='index.php'> 98 <table width='600' align='center'> 99 <tr> 100 <td align='right' width='150'>用户名:</td> 101 <td width='100'><input type='text' name='username' onfocus='focus_username()' onblur = 'blur_username()'/></td> 102 <td><span id="user_res"></span></td> 103 </tr> 104 <tr> 105 <td align='right' width='100'>密码:</td> 106 <td width='100'><input type='password' name='password' onfocus='focus_password()' onblur = 'blur_password()'/></td> 107 <td><span id="pass_res"></span></td> 108 </tr> 109 <tr> 110 <td></td> 111 <td><input type='submit' value='提交' /></td> 112 </tr> 113 </table> 114 </form> 115 116 117 </body> 118 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript"> 7 /*setAttribute 添加、修改 8 增加、修改标记的属性 9 要操作的对象.setAttribute(“属性名”,”属性值”) 10 查询|查找标记的属性 11 要操作的对象.getAttribute(“要获取的属性名”) 12 删除标记的属性名 13 要操作的对象.removeAttribute(“要移除的属性名”)*/ 14 function setAttr(){ 15 //定义一个对象img_obj 16 var img_obj = document.getElementsByTagName("img")[0]; 17 //为img 添加 title-属性 ,衣服-属性值 18 img_obj.setAttribute("title", "衣服"); 19 } 20 //getAttribute 获取img 21 function getAttr(){ 22 var img_obj = document.getElementsByTagName("img")[0]; 23 console.log(img_obj.getAttribute("title")); 24 } 25 //removeAttribute 移除 26 function delAttr(){ 27 //在img标签后面添加一个元素 28 var img_obj = document.getElementsByTagName("img")[0]; 29 //移除img里面的title属性名 30 img_obj.removeAttribute("title"); 31 } 32 33 </script> 34 </head> 35 <body> 36 <img src="images/02.jpg"><br> 37 <button onclick="setAttr()">setAttr</button> 38 <button onclick="getAttr()">getAttr</button> 39 <button onclick="delAttr()">delAttr</button> 40 </body> 41 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <table width="500" align="center" border="1"> 9 <tbody> 10 <tr> 11 <td>序号</td> 12 <td>新闻标题</td> 13 <td>操作</td> 14 </tr> 15 <tr id="tr_1"> 16 <td>1</td> 17 <td>大新闻</td> 18 <td><button onclick="delTr(this)" id="1">删除</button></td> 19 </tr> 20 <tr id="tr_2"> 21 <td>2</td> 22 <td>有新闻</td> 23 <td><button onclick="delTr(this)" id="2">删除</button></td> 24 </tr> 25 <tr id="tr_3"> 26 <td>3</td> 27 <td>环球新闻</td> 28 <td><button onclick="delTr(this)" id="3">删除</button></td> 29 </tr> 30 </tbody> 31 </table> 32 <script type="text/javascript"> 33 function delTr(obj){ 34 //获得当前对象的ID属性值 35 var sysid = obj.id; 36 //构建一个和tr的ID的属性值，一样的字符串 37 var tr_id = "tr_"+sysid; 38 //通过tr的id属性值将tr标签对象获取到 39 var tr_obj = document.getElementById(tr_id); 40 tr_obj.parentNode.removeChild(tr_obj); 41 } 42 </script> 43 </body> 44 </html>
