某預定系統分析 > 某區公共自行車租車卡在線預定，關於如何提升成功機率

時間 2019-12-04

標籤預定系統分析公共自行車租車在線關於如何提升成功機率欄目職業生涯简体版

原文原文鏈接

概訴

網上提交預定申請單，線下面交完成實體卡的交付和辦理。html

本文主要從技術角度分析預定頁面，僅供初學者技術交流使用。jquery

表單輸入和校驗

系統經過2步的確認點擊到達信息輸入頁面。ajax

地址：/bjggzxc/TzYybk_third_1.htmlbootstrap

驗證規則：緩存

字段名	字段ID	校驗規則1	驗證規則2	驗證規則3	驗證規則4
姓名	U_NAME	非空驗證	只能輸入中英文字符以及逗號、點、減號、下劃線，且至少兩個字符
性別	U_SEX	非空驗證	性別與身份證不匹配
出生日期	U_BIRTHDAY	非空驗證	日期格式不正確，輸入相似2011-01-01的日期！	出生日期與身份證不匹配	18-60歲之間才能預定！
戶口所在地	U_BIRTHPLACE	非空驗證	戶口所在地只能輸入中文，填寫省市區(縣)便可，最少兩個漢字！
證件類型	U_ZJTYPE	非空驗證
證件號	U_ZJNUM	非空驗證	身份證號碼校驗失敗，IdentityCodeValid	此證件號碼已經預定過，請不要重複預定！	校驗出生日期和性別
居住地址服務器	U_TXPLACE	非空驗證	居住地址只能輸入中英文字符、數字以及逗號、點、減號、下劃線，且至少五個字符
工做居住證號app	U_ZZZNUM		非北京戶口用戶必須輸入工做居住證號碼，且只能輸入12位數字，北京戶口請在戶口所在地中包含「北京」兩個字。
手機號	U_PHONE	非空驗證	手機號只能是11位數字!
電子郵箱ide	U_EMAIL	非空驗證	電子郵箱格式不正確！
聯繫人姓名post	U_U_NAME	非空驗證	只能輸入中英文字符以及逗號、點、減號、下劃線，且至少兩個字符
性別優化	U_U_SEX	非空驗證
與聯繫人的關係	U_U_RELATION	非空驗證	與聯繫人的關係只能輸入漢字，最少兩個字符！
聯繫電話	U_U_TELEPHONE	非空驗證	聯繫電話只能是數字或橫槓，最少8位！
通信地址	U_U_TXPLACE	非空驗證	聯繫人通信地址只能輸入中英文字符、數字以及逗號、點、減號、下劃線，且至少五個字符
選擇辦卡地點	U_CARD_ADDRESS	非空驗證
	Y_PC
	PC_ID

驗證代碼：

  1 $(function() {
  2     $('#U_BIRTHDAY').datetimepicker({
  3          language: 'zh-CN',
  4          minView: '2',  //只選擇日期，不選擇時間
  5          format: 'yyyy-mm-dd',
  6          startDate: '${yypc.ksrq}',
  7           endDate: new Date(), 
  8          autoclose: true ,
  9         todayBtn: true 
 10      }).on("changeDate", function(e){
 11 //         console.log($("#applyForm").data('formValidation'));
 12          $("#applyForm").bootstrapValidator('revalidateField', 'U_BIRTHDAY');
 13     });
 14     
 15     var validForm = $('#applyForm').bootstrapValidator({
 16         fields: {
 17             "U_NAME": {
 18                 validators: {
 19                     notEmpty: {  //非空驗證
 20                         message: '姓名不能爲空！'
 21                     },
 22                     regexp: {
 23                         regexp: /^[a-zA-z\u4e00-\u9fa5,\.\-_]{2,}$/,
 24                         message: '只能輸入中英文字符以及逗號、點、減號、下劃線，且至少兩個字符'
 25                     }
 26                 }
 27             },
 28             "U_SEX": {
 29                 validators: {
 30                     notEmpty: {  //非空驗證
 31                         message: '性別不能爲空，請選擇！'
 32                     },
 33                     callback: {
 34                         message: '性別與身份證不匹配！',
 35                         callback: function(value, validator, $field) {
 36                             var zjlx = $('select[name=U_ZJTYPE]').val();
 37                             var sfzh = $('input[name=U_ZJNUM]').val();
 38                             var sex=$("input[name='U_SEX']:checked").val();
 39 
 40                             if (sex != "" && zjlx == "身份證" && (sfzh.length == 18 || sfzh.length == 15)) {
 41                                 var sexFromSfzh = "";
 42                                 if(sfzh.length == 18) {
 43                                     sexFromSfzh = sfzh.substring(16, 17);
 44                                 } else if(sfzh.length == 15) {
 45                                     sexFromSfzh = sfzh.substring(14);
 46                                 }
 47                                 console.log(sexFromSfzh);
 48                                 var sexCode = parseInt(sexFromSfzh);
 49                                 
 50                                 if(sexCode % 2 == 0)
 51                                     sexFromSfzh = "女";
 52                                 else
 53                                     sexFromSfzh = "男";
 54 
 55                                 if(sex != sexFromSfzh)
 56                                     return false;    // or false
 57                             } 
 58                             return true;
 59                         }
 60                     }
 61                 }
 62             },
 63             "U_BIRTHDAY": {
 64                 validators: {
 65                     notEmpty: {  //非空驗證
 66                         message: '出生日期不能爲空！'
 67                     },
 68                     date: {
 69                         message: '日期格式不正確，輸入相似2011-01-01的日期！',
 70                         format: 'YYYY-MM-DD'
 71                     },
 72                     callback: {
 73                         message: '出生日期與身份證不匹配！',
 74                         callback: function(value, validator, $field) {
 75                             var zjlx = $('select[name=U_ZJTYPE]').val();
 76                             var sfzh = $('input[name=U_ZJNUM]').val();
 77                             if (zjlx == "身份證" && (sfzh.length == 18 || sfzh.length == 15)) {
 78                                 var birthdayFromSfzh = "";
 79                                 if(sfzh.length == 18) {
 80                                     birthdayFromSfzh = sfzh.substring(6, 14);
 81                                 } else if(sfzh.length == 15) {
 82                                     birthdayFromSfzh = "19" + sfzh.substring(6, 12);
 83                                 }
 84                                 if(value.replace(/-/g,'') != birthdayFromSfzh)
 85                                     return false;    // or false
 86                             } 
 87                             return true;
 88                         }
 89                     },
 90                     callback: {
 91                         message: '18-60歲之間才能預定！',
 92                         callback: function(value, validator, $field) {
 93                             var d = Date.parse(value.replace(/-/g,'/'));
 94                             var date = new Date();
 95                             var now = date.format("yyyyMMdd");
 96                             date.setTime(d);
 97                             date.addYears(18);
 98                             var date1 = date.format("yyyyMMdd");  //18歲是哪天
 99                             date.addYears(42);
100                             var date2 = date.format("yyyyMMdd");  //60歲是哪天
101                             console.log(date1);
102                             console.log(date2);
103                             console.log(now);
104                             return (now >= date1 && now <= date2);
105                         }
106                     }
107                 }
108             },
109             "U_BIRTHPLACE": {
110                 validators: {
111                     notEmpty: {  //非空驗證
112                         message: '戶口所在地不能爲空！'
113                     },
114                     regexp: {
115                         regexp: /^[\u4e00-\u9fa5]{2,}$/,
116                         message: '戶口所在地只能輸入中文，填寫省市區(縣)便可，最少兩個漢字！'
117                     }
118                 },
119                 onSuccess: function(e, data) {
120                     data.bv.revalidateField('U_ZZZNUM');
121                 }
122             },
123             "U_ZJTYPE": {
124                 validators: {
125                     notEmpty: {  //非空驗證
126                         message: '證件類型不能爲空，請選擇！'
127                     }
128                 }
129             },
130             "U_ZJNUM": {
131                 validators: {
132                     notEmpty: {  //非空驗證
133                         message: '證件號碼不能爲空！'
134                     },
135                     callback: {
136                         message: '身份證號碼校驗失敗！',
137                         callback: function(value, validator, $field) {
138                             var zjlx = $('select[name=U_ZJTYPE]').val();
139                             if (zjlx == "身份證")
140                                 return IdentityCodeValid(value);
141                             else
142                                 return true;
143                         }
144                     },
145                     remote: {
146                         message: '此證件號碼已經預定過，請不要重複預定！',
147                         url: 'TzYybk_checkZjhm_1.html',
148                         type: 'POST',
149 //                        delay: 1000,
150                         data: {
151                             Y_PC: $('input[name=Y_PC]').val(),
152                             PC_ID: $('input[name=PC_ID]').val()
153                         }
154                     }
155                 },
156                 onSuccess: function(e, data) {
157                     data.bv.revalidateField('U_BIRTHDAY');
158                     data.bv.revalidateField('U_SEX');
159                 }
160             },
161             "U_TXPLACE": {
162                 validators: {
163                     notEmpty: {  //非空驗證
164                         message: '居住地址不能爲空！'
165                     },
166                     regexp: {
167                         regexp: /^[a-zA-z0-9\u4e00-\u9fa5,， 　\.\-_]{5,}$/,
168                         message: '居住地址只能輸入中英文字符、數字以及逗號、點、減號、下劃線，且至少五個字符'
169                     }
170                     
171                 }
172             },
173             "U_ZZZNUM": {
174                 validators: {
175                      callback: {
176                         message: '非北京戶口用戶必須輸入工做居住證號碼，且只能輸入12位數字，北京戶口請在戶口所在地中包含「北京」兩個字。',
177                         callback: function(value, validator, $field) {
178                             var hk = $('input[name=U_BIRTHPLACE]').val();
179                             if (hk != "" && hk.indexOf("北京") < 0 && value == "") {
180                                    return false;    // or false
181                             } else {
182                                 if(value != "") {
183                                     if(/^[0-9]{12}$/m.test(value))
184                                         return true;
185                                     else 
186                                         return false;
187                                 } else 
188                                     return true;
189                             }
190                         }
191                     }
192                 }
193             },
194             "U_PHONE": {
195                 validators: {
196                     notEmpty: {  //非空驗證
197                         message: '手機號不能爲空！'
198                     },
199                     regexp: {
200                         regexp: /^[0-9]{11}$/,
201                         message: '手機號只能是11位數字！'
202                     }
203                 }
204             },
205             "U_EMAIL": {
206                 validators: {
207                     notEmpty: {  //非空驗證
208                         message: '電子郵箱不能爲空！'
209                     },
210                     regexp: {
211                         regexp: /^[a-zA-Z0-9_\-.]+@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/,
212                         message: '電子郵箱格式不正確！'
213                     }
214                 }
215             },
216             "U_ZJTYPE": {
217                 validators: {
218                     notEmpty: {  //非空驗證
219                         message: '證件類型不能爲空！'
220                     }
221                 }
222             },
223             "U_U_NAME": {
224                 validators: {
225                     notEmpty: {  //非空驗證
226                         message: '聯繫人姓名不能爲空！'
227                     },
228                     regexp: {
229                         regexp: /^[a-zA-z\u4e00-\u9fa5,\.\-_]{2,}$/,
230                         message: '只能輸入中英文字符以及逗號、點、減號、下劃線，且至少兩個字符'
231                     }
232                 }
233             },
234             "U_U_SEX": {
235                 validators: {
236                     notEmpty: {  //非空驗證
237                         message: '性別不能爲空！'
238                     }
239                 }
240             },
241             "U_U_RELATION": {
242                 validators: {
243                     notEmpty: {  //非空驗證
244                         message: '與聯繫人的關係不能爲空！'
245                     },
246                     regexp: {
247                         regexp: /^[\u4e00-\u9fa5]{2,}$/,
248                         message: '與聯繫人的關係只能輸入漢字，最少兩個字符！'
249                     }
250                 }
251             },
252             "U_U_TELEPHONE": {
253                 validators: {
254                     notEmpty: {  //非空驗證
255                         message: '聯繫電話爲空！'
256                     },
257                     regexp: {
258                         regexp: /^[0-9()-]{8,}$/,
259                         message: '聯繫電話只能是數字或橫槓，最少8位！'
260                     }
261                 }
262             },
263             "U_U_TXPLACE": {
264                 validators: {
265                     notEmpty: {  //非空驗證
266                         message: '聯繫人通信地址不能爲空！'
267                     },
268                     regexp: {
269                         regexp: /^[a-zA-z0-9\u4e00-\u9fa5,， 　\.\-_]{5,}$/,
270                         message: '聯繫人通信地址只能輸入中英文字符、數字以及逗號、點、減號、下劃線，且至少五個字符'
271                     }
272                 }
273             }
274         }
275     })
276     .on('success.form.bv', function(e) {
277         e.preventDefault();
278         editPcSave();
279     });
280 })

View Code

提早準備好合格的註冊/預定信息是件很重要的事情，經過代碼提取而後進行自動的填寫。

用一個本地庫去保存合格的註冊信息。

循環：提取信息，而後提交服務器。

確認提交優化

提早判斷信息都經過驗證之後（合格），除了用editPcSave中的ajaxSubmit來提交信息之外，以下：

function submitToSrv(){
$('#applyForm').ajaxSubmit({
            type : "post",
            url : "TzYybk_save_1.html",
            beforeSubmit : function() {
                $("button").attr("disabled", true);
            },
            success : function(responseText, statusText, xhr, $form) {
                var response = $.parseJSON(responseText);
                if(response.status=="ok") {
                    console.log(response.uid);
                    document.location="TzYybk_success_1.html?uid=" + response.uid;
                } else {
                    alert(response.message);
                }
            },
            error : function(request, textStatus, e) {
                $("button").attr("disabled", false);
            }
        });
};

setInterval("submitToSrv()", 5000);