织梦cms表单使用ajax提交、前端验证并提示30秒后再提交

织梦cms可以说是国内大多数企业站使用的内容管理系统，除了易使用外，它自带的表单提交也是一个很受欢迎的功能。但自带的表单提交安全性太差，而且每次提交都会跳转一个提示页，很是影响用户体验，所以本篇文章白天给大家分享一个让织梦cms的表单提交使用Ajax方式，并且前端增加验证以减少重复提交问题。

织梦cms表单提交使用Ajax方式

html部分

//引入表单验证js
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

<form role="form" id='form1' method="post">
    <div class="form-group">
        <label for="mianji">房屋面积 <em style="color: red;">*</em><small style="color:#ccc;font-weight: 200;margin-left: 20px;">仅需输入数字，面积是平方米</small></label>
        <input type="text" class="form-control" id="mianji" placeholder="请输入房屋面积" name="mianji" autocomplete="off">
    </div>
    <div class="form-group">
        <label for="name">姓名 <em style="color: red;">*</em></label>
        <input type="text" class="form-control" id="name" placeholder="请输入姓名" name="name" autocomplete="off">
    </div>
    <div class="form-group">
        <label for="shouji">手机号 <em style="color: red;">*</em></label>
        <input type="text" class="form-control" id="shouji" placeholder="请输入手机号" name="shouji" autocomplete="off">
    </div>
    <input value="" type="hidden" id="time" name="time"/>
    <script type="text/javascript">
        window.onload = function(){
            var nowDate = new Date();
            var str = nowDate.getFullYear()+"-"+(nowDate.getMonth() + 1)+"-"+nowDate.getDate()+" "+nowDate.getHours()+":"+nowDate.getMinutes()+":"+nowDate.getSeconds();
            document.getElementById("time").value=str;
        }
    </script>
    <input type="hidden" name="dede_fields" value="name,text;shouji,text;time,text;mianji,text"/>
    <input type="hidden" name="dede_fieldshash" value="15b519c934da3a1f3512a53e131f5522"/>
    <input type="button" class="btn btn-default" id="btn-form1" value="提交">
</form>

js部分

<script>
    $(function(){
        // 手机号验证
        jQuery.validator.addMethod("isPhone", function(value, element) {
            var length = value.length;
            var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请填写正确的手机号码");
        // 中文姓名验证，先验证中文，再验证个数
        jQuery.validator.addMethod('chcharacter', function(value, element){
            var tel = /^[u4e00-u9fa5]+$/;
            console.log(tel.test(value))
            return this.optional(element) || !(tel.test(value));
        }, '请输入汉字');
        $('#btn-form1').on('click',function(){
            var anniu=this
            // 设置再次提交的时间限制
            var wait = 30;
            function time_limit(obj) {
                if (wait == 0) {
                    obj.removeAttribute("disabled");
                    obj.value = "提交";
                    wait = 20;
                } else {
                    obj.setAttribute("disabled", true);
                    obj.value = "重新提交(" + wait + ")";
                    wait--;
                    setTimeout(function () {
                                time_limit(obj)
                            },
                            1000)
                }
            }
            // 先验证,并且设置一个状态，验证通过后，才能提交
            var status= $("#form1").validate({
                rules : {
                    mianji:{
                        required : true,
                        number:true
                    },
                    name : {
                        required : true,
                        chcharacter:true,
                        rangelength:[2,5]
                    },
                    shouji : {
                        required : true,
                        isPhone:true
                    }
                },
                messages : {
                    mianji : {
                        required : '请输入房屋面积',
                        number:'请输入数字，面积为平方米',
                    },
                    name : {
                        required : '请输入姓名',
                        chcharacter:'请输入汉字',
                        rangelength:'名字中最少2个汉字，最多5个'
                    },
                    shouji : {
                        required : '请填写手机号',
                        isPhone : '手机号格式不正确',
                    }
                }
            });
            console.log(status.form())
            // 根据验证的状态，进行判断，再提交
            if(status.form()){
                // var list={};
                // var diag = new Dialog();
                var name=$('#name').val()
                var mianji=$('#mianji').val()
                var shouji=$('#shouji').val()
                var time=$('#time').val()
                var dataString = 'name='+ name + '&mianji='+mianji+'平方米&action=post&shouji=' + shouji + '&time=' + time + '&diyid=2&do=2&dede_fields=name,text;shouji,text;time,text;mianji,text&dede_fieldshash=15b519c934da3a1f3512a53e131f5522&submit=提交';
                // console.log(list)
                $.ajax({
                    //请求方式
                    type : "POST",
                    //请求的媒体类型
                    // contentType: "application/json;charset=UTF-8",
                    // 响应的json返回值
                    datatype: "json",
                    //请求地址
                    url : "//www.xxx.com/plus/diy.php",
                    //数据，json字符串
                    data : dataString,
                    //请求成功
                    success : function(result) {
                        // return false;
                        // console.log(result);
                        if(result.code==1){
                            $.DialogByZ.Alert({Title: "温馨提示", Content: "提交成功，请耐心等待报价",BtnL:"确定"})
                            // 请求成功之后，执行时间限制的函数
                            console.log(anniu);
                            time_limit(anniu)
                        }
                    },
                    //请求失败，包含具体的错误信息
                    error : function(e){
                        console.log(e.status);
                        console.log(e.responseText);
                    }
                })
            }else{
                return false;
            }
        })
    })
</script>

修改diy.php代码（注：如担心出错，可复制一份文件，先用一个表单做测试）

header('Content-Type:application/json; charset=utf-8');
       if($dsql->ExecuteNoneQuery($query))
        {
            $id = $dsql->GetLastID();
            if($diy->public == 2)
            {
                //diy.php?action=view&diyid={$diy->diyid}&id=$id
                // $goto = "diy.php?action=list&diyid={$diy->diyid}";
                // $bkmsg = '发布成功，现在转向表单列表页...';
                $data=array('code'=>1,'msg'=>'提交成功，请耐心等待');
                echo json_encode($data);
            }
            else
            {
                // $goto = !empty($cfg_cmspath) ? $cfg_cmspath : '/';
                // $bkmsg = '发布成功，请等待管理员处理...';
                $data=array('code'=>1,'msg'=>'提交成功，请耐心等待');
                echo json_encode($data);
            }
        }
    }