某预约系统分析 > 某区公共自行车租车卡在线预约，关于如何提高成功概率-CarlZeng
概诉 网上提交预约申请单，线下面交完成实体卡的交付和办理。 本文主要从技术角度分析预约页面，仅供初学者技术交流使用。 表单输入和校验 系统通过2步的确认点击到达信息输入页面。 地址：/bjggzxc/TzYybk_third_1.html 验证规则： 居住地址 工作居住证号 电子邮箱 联系人姓名 性
概诉
网上提交预约申请单，线下面交完成实体卡的交付和办理。
本文主要从技术角度分析预约页面，仅供初学者技术交流使用。
表单输入和校验
系统通过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
另外：提高成功概率的主要影响因素
- 对网页资源的本地化，优化；给服务器减轻压力
- 对资源进行缓存jquery-1.11.2.min.js
- 对资源进行映射。
- 服务器测速（多服务器情况下）
定义测速机制，根据数据包路由信息确定最优服务器IP地址，直接缓存到本地hosts文件中3. 智能DNS切换
多服务器情况下，切换选择基于本机的最优服务器4. CDN返回缓存
CDN判断
结语
这个1.0版本的分析还有些技术细节有待优化.
欢迎探讨，如果您想找人帮忙：
