织梦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);
            }
        }
    }

提示:本文织梦cms表单使用ajax方式提交,并使用validate表单验证js。大概的代码就是这些,具体想要什么效果还得根据自己的需求来做更改,希望能为你带来帮助。

过去的今天:

文章最后一次修改于

原创文章,作者:白天,如若转载请注明出处:织梦cms表单使用ajax提交、前端验证并提示30秒后再提交

(3)
打赏 微信扫一扫 微信扫一扫
上一篇 2020年7月15日 23:13:17
下一篇 2020年11月19日 18:07:16

相关阅读推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

微信内浏白天博客