<JavaScript> 十六. input对象的属性和方法

  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>