某预约系统分析某区公共自行车租车卡在线预约，关于如何提高成功概率

概诉

网上提交预约申请单，线下面交完成实体卡的交付和办理。

本文主要从技术角度分析预约页面，仅供初学者技术交流使用。

表单输入和校验

系统通过2步的确认点击到达信息输入页面。

地址：/bjggzxc/TzYybk_third_1.html

验证规则：

字段名	字段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	非空验证	居住地址只能输入中英文字符、数字以及逗号、点、减号、下划线，且至少五个字符
工作居住证号	U_ZZZNUM		非北京户口用户必须输入工作居住证号码，且只能输入12位数字，北京户口请在户口所在地中包含“北京”两个字。
手机号	U_PHONE	非空验证	手机号只能是11位数字!
电子邮箱	U_EMAIL	非空验证	电子邮箱格式不正确！
联系人姓名	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);

View Code

另外：提高成功概率的主要影响因素

对网页资源的本地化，优化；给服务器减轻压力
1. 对资源进行缓存jquery-1.11.2.min.js
2. 对资源进行映射。
服务器测速（多服务器情况下）
智能DNS切换
CDN返回缓存

结语

这个1.0版本的分析还有些技术细节有待优化.

欢迎探讨，如果您想找人帮忙：