form表单提交同步校验异步校验

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wm31898/article/details/86164480

form表单提交一般都是同步提交或者ajax提交，今天就讲解一下关于form submit提交遇到的两个小问题

情况1：

<form enctype="multipart/form-data" onSubmit="but_onlick();return false;">
             <fieldset>
                            <label class="block clearfix">
                                         <span class="block input-icon input-icon-right">
                                          <input type="text" id="username" name="username" class="form-control" placeholder="账号" />
                                                            <i class="icon-user"></i>
                                                        </span>
                                                    </label>

                                                    <label class="block clearfix">
                                                        <span class="block input-icon input-icon-right">
                                                            <input type="password" id="pwd" name="pwd" class="form-control" placeholder="密码" />
                                                            <i class="icon-lock"></i>
                                                        </span>
                                                    </label>

                                                   
                                                    <label class="block clearfix">
                                                        <span id="span_id"></span>
                                                    </label>

                                                    <div class="space"></div>

                          <div class="clearfix">
                                        <button type="submit" class="width-35 pull-right btn btn-sm btn-primary">
                                        <i class="icon-key"></i>  登录</button>
                           </div>

               <div class="space-4"></div>
       </fieldset>
 </form>

如果form是通过submit提交的话，那么是当前页面form数据都会传递过去，这样在后台判断的话，如果数据校验问题又返回到form表单页面，这样很容易造成数据丢失，要么就是数据跟提交前填写内容不同。可以使用ajax的方法进行校验，保证数据稳定性，提交到后台就可以尽量减少问题。

<script type="text/javascript">
        function but_onlick () {
        
            var username = $("#username").val();
            var pwd = $("#pwd").val();
            var yzm = $("#yzm").val();
            if(username == '') {
            //    alert('用户不能为空');
                $("#span_id").html('用户不能为空');
                $("#span_id").css("color","red");
                var username = document.getElementById("username");
                username.focus();//焦点事件
                username.select();
                return ;
            } 
            

            var t= {
                    username: username
                };
            $.ajax({
                type: "post",
                url: "/Admin/login/ajaxlogin", 
                //data:JSON.stringify(t), //将对象转为为json字符串  
                data : t ,
                 //dataType:"json",  
                //contentType:"application/text", //这个必须，不然后台接受时会出现乱码现象  
                success: function(result) {                    //r为返回值
                    //alert(result.code);
                    console.log(result.code);
                    if (result.code == '10000') {
                        $("#span_id").html('登录成功');
                        $("#span_id").css("color","blue");
                        window.location.href = "/wfpcAdmin/home";
                    } else {
                        $("#span_id").html(result.msg);
                        $("#span_id").css("color","red");
                        $('#captcha_img').click();
                    }
                }
            });
            
        }
        </script>

在form表单那里，<form enctype="multipart/form-data" onSubmit="but_onlick();return false;"> 使用这个

情况2：

<form action="add" method="post" onsubmit="return goodsaddsave();">

           <button class="btn btn-success" type="submit"><i class="fa fa-check"></i> 确定添加</button>

如果一定使用form表单同步，按回车键提交，在做form里面数据又想着去校验，又怎么办呢？？？

可以尝试一下办法

function goodsaddsave(){

       ///////////////////////////////////////////////////
       /////  多图上传不能为空
       ///////////////////////////////////////////////////
       var goods_arr = $("input[name='goods_img_array[]']").val();
       if (goods_arr == undefined ||  goods_arr == null){
           $("#spanid").show();
           $("#span_id").show();
           $("#spanid").focus();//焦点事件
           $("#spanid").select();
           return false;
       } else {
           $("#span_id").hide();
           $("#spanid").hide();
       }
}

因为你在form表单   onsubmit="return goodsaddsave();    在方法里面 return false 就可以在前端校验了

这是遇到一些同学使用form表单提交，两种情况：同步和异步。不过现在大部分都是异步校验，谁还会用最原始的方法去后台校验，前端都会校验好form表单的数据问题。谢谢大家来指导！