表单允许客户端的用户以标准格式向服务器提交数据。表单的创建者为了收集所需数据，使用了各种控件设计表单如 INPUT 或 SELECT。查看表单的用户只需填充数据并单击提交按钮即可向服务器发送数据。服务器上的脚本会处理这些数据。
表单由三个重要属性action，method，onsubmit。
action：规定当提交表单时，向何处发送表单数据。
method：规定如何发送表单数据。
onsubmit：当表单被提交时执行脚本。
页面提交表单的数据是不可信任的，js脚本验证作为辅助验证，嘿嘿，防君子不防小人。后台需要对表单提交数据判断。全部正确跳转到成功页，否则，跳转到辅助性的提示页（记录这些非法操作的用户）。
示例如下图所示：
主要讲述表单提交关于onsubmit那些事
一般方法：使用onsubmit="return check()"对表单的值进行验证。
对输入的姓名，手机号，备注进行验证。
示例如下图所示（check图一）：
check图一
也可以指定表单ID绑定onsubmit事件
示例如下图所示（check图二）：
check图二
这两个主要区别：
一、绑定事件的方式不同。check图二中蓝色方框处是这两种绑定事件的最大区别，当任一个判定条件不通过时阻止浏览器默认行为。
二、check图一中的“return false”和check图二中的“return”也是亮点哈。
check图一中的“return false”的作用是函数check()返回布尔值false，传给onsubmit中 return check()，阻止浏览器提交。
check图二中的“return”的作用是当某个判断条件不符合时，return返回，不执行后面的。
关于js代码简单分析，如下：
var mform = { // 获取ID $: function(){ return document.getElementById(arguments[0]); }, // 阻止浏览器默认行为 stopDefault: function(){ if(event && event.preventDefault){ event.preventDefault(); } else{ window.event.returnValue = false; } }, // 绑定事件 elem指ID，type指事件类型，fn指函数 addEvent: function(elem,type,fn){ if(elem.addEventListener){ elem.addEventListener(type, fn, false); } else if(elem.attachEvent) { elem.attachEvent("on" + type, fn); } else{ elem["on" + type] = fn; } }, // 设置元素的文本值 text: function(elem,str){ if(!!elem.innerText){ elem.innerText = str; } else if(!!elem.textContent){ elem.textContent = str; } }, // 过滤左右空格 trim: function(str){ return str.replace(/(^\s*)|(\s*$)/g, ""); }, // 判断是否为汉字，true时为汉字 isCNCharacter: function(str){ if(/.*[\u4e00-\u9fa5]+.*$/.test(str)){ return true; } else{ return false; } }, // 判断是否为手机号，true时为手机号 isTelNum: function(str){ if(/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str)){ return true; } else { return false; } }, // 初始化事件 init: function(){ var _this = this; _this.check(); }, // 为表单绑定事件 check: function(){ var _this = this; var name = _this.$("userName"), nameErr = _this.$("userNameErr"), tel = _this.$("tel"), telErr = _this.$("telErr"), remark = _this.$("remark"), remarkErr = _this.$("remarkErr"), kform = _this.$("kform"); _this.addEvent(kform,"submit",function(){ var nameVal = name.value,telVal = tel.value,remarkVal = remark.value; if((!_this.isCNCharacter(nameVal)) || (!_this.isTelNum(telVal)) || (_this.trim(remarkVal).length < 6)){ _this.stopDefault(); } if(_this.trim(nameVal).length===0){ _this.text(nameErr,"姓名不能为空！"); return; } else if(!_this.isCNCharacter(nameVal)){ _this.text(nameErr,"仅限中文名字!"); return; } else{ _this.text(nameErr,""); } if(_this.trim(telVal).length === 0){ _this.text(telErr,"手机号码不能为空！"); return; } else if(!_this.isTelNum(telVal)){ _this.text(telErr,"手机号码不正确！"); return; } else{ _this.text(telErr,""); } if(_this.trim(remarkVal).length < 6){ _this.text(remarkErr,"不能少于6个字！"); return; } }); } } mform.init();
表单源码如下：
1 <?php 2 $action = $_SERVER["PHP_SELF"]; 3 4 $name = ""; 5 $nameErr = ""; 6 $isname = false; 7 $tel = ""; 8 $telErr = ""; 9 $istel = false; 10 $remark = ""; 11 $remarkErr = ""; 12 $isremark = false; 13 14 if(isset($_POST["submit"])){ 15 $name = $_POST["userName"]; 16 $tel = $_POST["tel"]; 17 $remark = $_POST["remark"]; 18 19 if(empty($name)){ 20 $nameErr = "姓名不能为空！"; 21 } else if(!preg_match("/^[\x7f-\xff]+$/", $name)){ 22 $nameErr = "仅限中文名字!"; 23 } 24 else{ 25 $isname = true; 26 } 27 28 if(empty($tel)){ 29 $telErr = "手机号码不能为空！"; 30 } else if(!preg_match("/^1[3|4|5|6|7|8|9][0-9]{9}$/", $tel)){ 31 $telErr = "手机号码不正确!"; 32 } 33 else{ 34 $istel = true; 35 } 36 37 if(strlen($remark)<6){ 38 $remarkErr = "不能少于6个字！"; 39 } 40 else{ 41 $isremark = true; 42 } 43 44 if($isname && $istel && $isremark){ 45 header("Location: result.php"); 46 } 47 else{ 48 // 记录用户信息 49 } 50 } 51 ?> 52 53 54 <!DOCTYPE html> 55 <html> 56 <head> 57 <meta charset="utf-8"/> 58 <title>表单提交</title> 59 <style> 60 *{margin:0px;padding:0px;color:#000;font-size:14px;line-height:20px;background: #fff;} 61 .kform{width: 600px; margin: 60px auto; border: 1px solid #999; padding: 20px;} 62 .kform .item{ margin-bottom: 10px; vertical-align: middle;} 63 .kform .item span{display: inline-block;width: 80px;text-align: right; margin-right: 10px; } 64 .kform .big span,.kform .big .err{vertical-align: top;} 65 .kform .item .txt{width: 180px; height: 30px; line-height: 30px; border: 1px solid #999; text-indent: 6px; vertical-align: middle;} 66 .kform .item .err{color: #f00; margin-left: 10px;} 67 .kform .item textarea{width: 300px; height: 80px; overflow: hidden; border: 1px solid #999;padding: 6px; resize: none;} 68 .kform .item .btn{ display: inline-block; padding: 10px 20px; background: #f60; color: #fff; border: none; border-radius: 3px; cursor: pointer;} 69 </style> 70 </head> 71 <body> 72 <form id="kform" class="kform" action="<?php echo $action; ?>" method="POST" > 73 <div class="item"> 74 <span>姓名：</span> 75 <input id="userName" class="txt" type="text" name="userName" value="<?php echo !empty($name)?$name:''; ?>" maxLength="10" placeholder="中文姓名" /> 76 <label id="userNameErr" class="err"><?php echo !empty($nameErr)?$nameErr:" "; ?></label> 77 </div> 78 <div class="item"> 79 <span>电话：</span> 80 <input id="tel" class="txt" type="text" name="tel" value="<?php echo !empty($tel)?$tel:''; ?>" maxLength="11" placeholder="手机号码" /> 81 <label id="telErr" class="err"><?php echo !empty($telErr)?$telErr:" "; ?></label> 82 </div> 83 <div class="item big"> 84 <span>备注：</span> 85 <textarea id="remark" name="remark" placeholder="至少6个字" maxLength="100"><?php echo !empty($remark)?$remark:''; ?></textarea> 86 <label id="remarkErr" class="err"><?php echo !empty($remarkErr)?$remarkErr:" "; ?></label> 87 </div> 88 <div class="item"> 89 <span> </span> 90 <input class="btn" name="submit" type="submit" value="确定" /> 91 </div> 92 </form> 93 <script> 94 var mform = { 95 // 获取ID 96 $: function(){ 97 return document.getElementById(arguments[0]); 98 }, 99 // 阻止浏览器默认行为 100 stopDefault: function(){ 101 if(event && event.preventDefault){ 102 event.preventDefault(); 103 } 104 else{ 105 window.event.returnValue = false; 106 } 107 }, 108 // 绑定事件 elem指ID，type指事件类型，fn指函数 109 addEvent: function(elem,type,fn){ 110 if(elem.addEventListener){ 111 elem.addEventListener(type, fn, false); 112 } 113 else if(elem.attachEvent) { 114 elem.attachEvent("on" + type, fn); 115 } 116 else{ 117 elem["on" + type] = fn; 118 } 119 }, 120 // 设置元素的文本值 121 text: function(elem,str){ 122 if(!!elem.innerText){ 123 elem.innerText = str; 124 } 125 else if(!!elem.textContent){ 126 elem.textContent = str; 127 } 128 }, 129 // 过滤左右空格 130 trim: function(str){ 131 return str.replace(/(^\s*)|(\s*$)/g, ""); 132 }, 133 // 判断是否为汉字，true时为汉字 134 isCNCharacter: function(str){ 135 if(/.*[\u4e00-\u9fa5]+.*$/.test(str)){ 136 return true; 137 } 138 else{ 139 return false; 140 } 141 }, 142 // 判断是否为手机号，true时为手机号 143 isTelNum: function(str){ 144 if(/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str)){ 145 return true; 146 } 147 else { 148 return false; 149 } 150 }, 151 // 初始化事件 152 init: function(){ 153 var _this = this; 154 _this.check(); 155 }, 156 // 为表单绑定事件 157 check: function(){ 158 var _this = this; 159 var name = _this.$("userName"), 160 nameErr = _this.$("userNameErr"), 161 tel = _this.$("tel"), 162 telErr = _this.$("telErr"), 163 remark = _this.$("remark"), 164 remarkErr = _this.$("remarkErr"), 165 kform = _this.$("kform"); 166 _this.addEvent(kform,"submit",function(){ 167 var nameVal = name.value,telVal = tel.value,remarkVal = remark.value; 168 if((!_this.isCNCharacter(nameVal)) || (!_this.isTelNum(telVal)) || (_this.trim(remarkVal).length < 6)){ 169 _this.stopDefault(); 170 } 171 if(_this.trim(nameVal).length===0){ 172 _this.text(nameErr,"姓名不能为空！"); 173 return; 174 } 175 else if(!_this.isCNCharacter(nameVal)){ 176 _this.text(nameErr,"仅限中文名字!"); 177 return; 178 } 179 else{ 180 _this.text(nameErr,""); 181 } 182 if(_this.trim(telVal).length === 0){ 183 _this.text(telErr,"手机号码不能为空！"); 184 return; 185 } 186 else if(!_this.isTelNum(telVal)){ 187 _this.text(telErr,"手机号码不正确！"); 188 return; 189 } 190 else{ 191 _this.text(telErr,""); 192 } 193 if(_this.trim(remarkVal).length < 6){ 194 _this.text(remarkErr,"不能少于6个字！"); 195 return; 196 } 197 }); 198 } 199 } 200 201 mform.init(); 202 </script> 203 </body> 204 </html>