关于form表单onsubmi提交

表单允许客户端的用户以标准格式向服务器提交数据。表单的创建者为了收集所需数据，使用了各种控件设计表单如 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();

表单源码如下：

 <?php
     $action = $_SERVER["PHP_SELF"]; 

     $name = "";
     $nameErr = "";
     $isname = false;
     $tel = "";
     $telErr = "";
     $istel = false;
     $remark = "";
     $remarkErr = "";
     $isremark = false;

     if(isset($_POST["submit"])){
         $name = $_POST["userName"];
         $tel = $_POST["tel"];
         $remark = $_POST["remark"];

         if(empty($name)){
             $nameErr = "姓名不能为空！";
         } else if(!preg_match("/^[\x7f-\xff]+$/", $name)){
             $nameErr = "仅限中文名字!";
         }
         else{
             $isname = true;
         }

         if(empty($tel)){
             $telErr = "手机号码不能为空！";
         } else if(!preg_match("/^1[3|4|5|6|7|8|9][0-9]{9}$/", $tel)){
             $telErr = "手机号码不正确!";
         }
         else{
             $istel = true;
         }

         if(strlen($remark)<6){
             $remarkErr = "不能少于6个字！";
         }
         else{
             $isremark = true;
         }

         if($isname && $istel && $isremark){
             header("Location: result.php");
         }
         else{
             // 记录用户信息
         }
     }
 ?>

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8"/>
         <title>表单提交</title>
         <style>
             *{margin:0px;padding:0px;color:#000;font-size:14px;line-height:20px;background: #fff;}
             .kform{width: 600px; margin: 60px auto; border: 1px solid #999; padding: 20px;}
             .kform .item{ margin-bottom: 10px; vertical-align: middle;}
             .kform .item span{display: inline-block;width: 80px;text-align: right; margin-right: 10px; }
             .kform .big span,.kform .big .err{vertical-align: top;}
             .kform .item .txt{width: 180px; height: 30px; line-height: 30px; border: 1px solid #999; text-indent: 6px; vertical-align: middle;}
             .kform .item .err{color: #f00; margin-left: 10px;}
             .kform .item textarea{width: 300px; height: 80px; overflow: hidden; border: 1px solid #999;padding: 6px; resize: none;}
             .kform .item .btn{ display: inline-block; padding: 10px 20px; background: #f60; color: #fff; border: none; border-radius: 3px; cursor: pointer;}
         </style>
     </head>
     <body>
         <form id="kform" class="kform" action="<?php echo $action; ?>" method="POST" >
             <div class="item">
                 <span>姓名：</span>
                 <input id="userName" class="txt" type="text" name="userName" value="<?php echo !empty($name)?$name:''; ?>" maxLength="10" placeholder="中文姓名" />
                 <label id="userNameErr" class="err"><?php echo !empty($nameErr)?$nameErr:" "; ?></label>
             </div>
             <div class="item">
                 <span>电话：</span>
                 <input id="tel" class="txt" type="text" name="tel" value="<?php echo !empty($tel)?$tel:''; ?>" maxLength="11" placeholder="手机号码" />
                 <label id="telErr" class="err"><?php echo !empty($telErr)?$telErr:" "; ?></label>
             </div>
             <div class="item big">
                 <span>备注：</span>
                 <textarea id="remark" name="remark" placeholder="至少6个字" maxLength="100"><?php echo !empty($remark)?$remark:''; ?></textarea>
                 <label id="remarkErr" class="err"><?php echo !empty($remarkErr)?$remarkErr:" "; ?></label>
             </div>
             <div class="item">
                 <span>&nbsp;</span>
                 <input class="btn" name="submit" type="submit" value="确定" />
             </div>
         </form>
         <script>
             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();
         </script>
     </body>
 </html>