推薦幾個關鍵詞

1.jquery validate自定義方法
2.dedecms ajax提交表單

記得，一定要百度，不懂的，先不要靠自己的經驗

下面是一些程式碼

html程式碼

<div class="container">
            <h2 class="text-center"  style="font-weight: 800;">線上留言</h2>
            <div class="row">
                <div class="col-xs-12">
<!--這裡一定要寫method="post"，不然，ajax提交的時候，就算設定了post，提交的引數，還是會寫入到url中--->
                    <form role="form"  id='form1'  method="post">
                        <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 name="mytime" 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" />
                        <input type="hidden" name="dede_fieldshash" value="c4691be854e9f9c1d5ff2a0e1d9704ae" />
                        <button type="submit" class="btn btn-default"  id="btn-form1"  style="font-size: .96240942rem;color:#fff;width: 100%; height: 2.75rem; margin: 0px auto; background-color: rgb(255, 156, 0); border-radius: 3px; line-height: 2.75rem;">提交</button>
                    </form>
                </div>
                
            </div>
           
        </div>
 

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 status= $("#form1").validate({
                                    rules : {
                                        name : {
                                            required : true,
                                            chcharacter:true,
                                            rangelength:[2,5]
                                        },
                                        shouji : {
                                            required : true,
                                            isPhone:true
                                        }
                                    },
                                    messages : {
                                        name : {
                                            required : '請輸入姓名',
                                            chcharacter:'請輸入漢字',
                                            rangelength:'名字中最少2個漢字，最多5個'


                                        },
                                        shouji : {
                                            required : '請填寫手機號',
                                            isPhone : '手機號格式不正確',
                                        }
                                    }
                                });
                                console.log(status.form())

                            // 根據驗證的狀態，進行判斷，再提交

                            if(status.form()){
                                // var list={};
                               
                                var name=$('#name').val()
                                var shouji=$('#shouji').val()
                                var time=$('#time').val()
                                var dataString = 'name='+ name + '&action=post&shouji=' + shouji + '&time=' + time + '&diyid=1&do=2&dede_fields=name,text;shouji,text;time,text&dede_fieldshash=c4691be854e9f9c1d5ff2a0e1d9704ae&submit=提交';
                                // console.log(list)
                                $.ajax({
                                        //請求方式
                                        type : "POST",
                                        //請求的媒體型別,把請求型別註釋掉吧
                                        // contentType: "application/json;charset=UTF-8",
                                        //請求地址
                                        url : "http://www.XXX.com/plus/diy.php",
                                        //資料，json字串
                                        data : dataString,
                                        //請求成功
                                        success : function(result) {
                                            console.log(result);
                                            $.DialogByZ.Autofade({Content: "提交成功，請耐心等待"})
                                        },
                                        //請求失敗，包含具體的錯誤資訊
                                        error : function(e){
                                            console.log(e.status);
                                            console.log(e.responseText);
                                        }
                                    })
                            }else{
                                return false;
                            }
                        })
            })
        </script>