<JavaScript> 十五. form对象的属性和方法 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title></title>
  5 <script type="text/javascript">
  6 
  7 /*
  8     form对象: 一个form标记, 就是一个form对象
  9     ---------------------- 属性 -------------------
 10     name: 表单的名称
 11     action: 表单的数据处理程序(PHP文件)
 12     method: 表单的提交方式(GET, POST)
 13     enctype: 表单数据的编码方式
 14 
 15     ---------------------- 方法 ---------------------
 16     submit() 提交表单 与 <input type="submit /> 功能一样
 17     reset() 重置表单 与重置按钮功能一样
 18 
 19     ---------------------- 事件 -----------------------
 20     onsubmit: 当点击提交按钮时发生, 用于表单提交前进行表单验证
 21     onreset: 当点击重置按钮时发生
 22 
 23     获取表单元素的方式
 24     (1) 通过id来获取 document.getElementById(id)
 25     (2) 通过标记名来获取 document.getElementsByTagName(tagName)
 26     (3) 通过name属性来获取 document.formName
 27 
 28 */
 29 
 30 // ------------------------- form属性 ----------------
 31 // window.onload = function () {
 32 
 33 //     // 获取form
 34 //     var formObj = document.form1;
 35 
 36 //     // 添加属性
 37 //     // 提交方式
 38 //     formObj.method = "post";
 39 
 40 //     // 处理程序
 41 //     formObj.action = "login.php";
 42 
 43 // }
 44 
 45 // ------------------------- 验证和提交表单 ----------------
 46 /*
 47     事件返回值: 会影响事件的默认动作 
 48     如果返回false, 阻止默认动作执行, 返回true或空, 默认动作继续执行
 49     受返回值影响的事件有两个: onclick, onsubmit 
 50     验证提交表单的方法:
 51     (1) 使用submit按钮, 结合onsubmit事件来实现
 52     (2) 使用submit按钮, 结合onclick事件 <input type="submit" value="提交表单" onclick="return checkForm()">
 53 */
 54 
 55 // 表单验证方法1 
 56 function checkForm() {
 57 
 58     // 判断用户名是否为空
 59     if (document.form1.username.value == "") {
 60         return false;
 61     }
 62     else {
 63         return true;
 64     }
 65 }
 66 
 67 // 表单验证方法3
 68 function checkForm3() {
 69     
 70     // 获取用户名
 71     var username = document.form1.username.value;
 72 
 73     // 判断
 74     if (username.length == 0) {
 75         alert("用户名不能为空!");
 76     } else if (username.length < 5 || username.length > 20) {
 77         alert("用户名介于5-20个字符!")
 78     } else if (checkOtherChar(username)) {
 79         alert("用户名不能含有特殊符号!")
 80     } else {
 81         alert("用户名合法!");
 82         document.form1.submit();
 83     }
 84 }
 85 
 86 // 函数: 特殊符号比对
 87 function checkOtherChar(str) {
 88 
 89     // 特殊符号数组
 90     var arr = ["!", "@", "#", "%", "&", "*", "<", ">", "/", "\\"];
 91 
 92     for (var i = 0; i < arr.length; i++) {
 93         for (var j = 0; j < str.length; j++) {
 94             if (arr[i] == str.charAt(j)) {
 95                 return true;
 96             }
 97         }
 98     }
 99     return false;
100 }
101 
102 </script>
103 </head>
104 <body>
105 
106 <form name="form1" method="post" action="login.php" onsubmit="return checkForm()">
107 用户名: <input type="text" name="username">
108 密码: <input type="password" name="userpwd">
109 <input type="submit" value="提交表单">
110 <input type="button" value="提交表单3" onclick="checkForm3()">
111 </form>
112 
113 </body>
114 </html>

 

posted @ 2017-02-07 20:43  云淡风轻我爱编程  阅读(497)  评论(0)    收藏  举报