1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript"> 6 7 /* 8 input对象 一个input标记, 就是一个input对象 9 --------------------------- 属性 -------------------------- 10 name: 表单元素的名称 11 value: 表单元素的值 可以通过该属性获取表单元素的值 12 size: 表单的长度 13 maxlength: 表单元素的最大长度 14 disabled: 禁用属性 15 readonly: 只读属性 16 17 -------------------------- 方法 --------------------------- 18 onfocus() 当获得焦点时 19 onblur() 当失去焦点时 20 select() 当选中文本时 21 */ 22 23 function focus_username() { 24 25 // 获取元素 26 var divObj = document.getElementById("result_username"); 27 28 // 设置内容 29 divObj.innerHTML = "输入用户名"; 30 divObj.style.color = "gray" 31 } 32 33 function blur_username() { 34 // 获取元素 35 var divObj = document.getElementById("result_username"); 36 37 // 获取用户名 38 var username = document.form2.username.value; 39 40 // 判断用户名 41 if (username == 0) { 42 divObj.innerHTML = "<font color='red'>不能为空</font>" 43 } else if (username.length < 5 || username.length > 20) { 44 divObj.innerHTML = "<font color='red'>介于5-20之间</font>" 45 } else { 46 divObj.innerHTML = "<font color='green'>合法</font>"; 47 return true; 48 } 49 return false; 50 } 51 52 function focus_userpwd() { 53 54 // 获取元素 55 var divObj = document.getElementById("result_userpwd"); 56 57 // 设置内容 58 divObj.innerHTML = "输入密码"; 59 divObj.style.color = "gray" 60 } 61 62 function blur_userpwd() { 63 64 // 获取元素 65 var divObj = document.getElementById("result_userpwd"); 66 67 // 获取密码 68 var userpwd = document.form2.userpwd.value; 69 70 // 密码判断 71 if (userpwd == 0) { 72 divObj.innerHTML = "<font color='red'>不能为空</font>" 73 } else if (userpwd.length < 5 || userpwd.length > 20) { 74 divObj.innerHTML = "<font color='red'>介于5-20之间</font>" 75 } else { 76 divObj.innerHTML = "<font color='green'>合法</font>"; 77 return true; 78 } 79 return false; 80 } 81 82 // 函数 表单验证 83 function checkForm() { 84 85 // 用户名合法和密码合法才能通过验证 86 if (blur_username() && blur_userpwd()) { 87 return true; 88 } 89 return false; 90 } 91 92 </script> 93 </head> 94 <body> 95 96 <!-- 实例1 --> 97 <form name="form1" method="post" action="login.php"> 98 用户名: <input type="text" name="username" onfocus="this.value = 'focus'; this.select();" onblur="this.value = 'blur'"> 99 密码: <input type="password" name="userpwd"> 100 <input type="submit" value="提交表单"> 101 </form> 102 103 <!-- 实例2 --> 104 <form name="form2" action="login.php", method="post" onsubmit="return checkForm()"> 105 <table width="600" border="1" bordercolor="#ccc" align="center" rules="all" cellpadding="5"> 106 <tr> 107 <td align="right">用户名: </td> 108 <td><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()"></td> 109 <td width="300"><div id="result_username"></div></td> 110 </tr> 111 112 <tr> 113 <td align="right">密码: </td> 114 <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"></td> 115 <td><div id="result_userpwd"></div></td> 116 </tr> 117 118 <tr> 119 <td></td> 120 <td colspan="2"> 121 <input type="submit" value="提交表单"></input> 122 <input type="reset" value="重新填写"> 123 </td> 124 </tr> 125 126 </body> 127 </html>