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>