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

概诉

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

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

表单输入和校验

系统通过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

验证代码：

 $(function() {
     $('#U_BIRTHDAY').datetimepicker({
          language: 'zh-CN',
          minView: '2',  //只选择日期，不选择时间
          format: 'yyyy-mm-dd',
          startDate: '${yypc.ksrq}',
           endDate: new Date(),
          autoclose: true ,
         todayBtn: true
      }).on("changeDate", function(e){
 //         console.log($("#applyForm").data('formValidation'));
          $("#applyForm").bootstrapValidator('revalidateField', 'U_BIRTHDAY');
     });

     var validForm = $('#applyForm').bootstrapValidator({
         fields: {
             "U_NAME": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '姓名不能为空！'
                     },
                     regexp: {
                         regexp: /^[a-zA-z\u4e00-\u9fa5,\.\-_]{2,}$/,
                         message: '只能输入中英文字符以及逗号、点、减号、下划线，且至少两个字符'
                     }
                 }
             },
             "U_SEX": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '性别不能为空，请选择！'
                     },
                     callback: {
                         message: '性别与身份证不匹配！',
                         callback: function(value, validator, $field) {
                             var zjlx = $('select[name=U_ZJTYPE]').val();
                             var sfzh = $('input[name=U_ZJNUM]').val();
                             var sex=$("input[name='U_SEX']:checked").val();

                             if (sex != "" && zjlx == "身份证" && (sfzh.length == 18 || sfzh.length == 15)) {
                                 var sexFromSfzh = "";
                                 if(sfzh.length == 18) {
                                     sexFromSfzh = sfzh.substring(16, 17);
                                 } else if(sfzh.length == 15) {
                                     sexFromSfzh = sfzh.substring(14);
                                 }
                                 console.log(sexFromSfzh);
                                 var sexCode = parseInt(sexFromSfzh);

                                 if(sexCode % 2 == 0)
                                     sexFromSfzh = "女";
                                 else
                                     sexFromSfzh = "男";

                                 if(sex != sexFromSfzh)
                                     return false;    // or false
                             }
                             return true;
                         }
                     }
                 }
             },
             "U_BIRTHDAY": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '出生日期不能为空！'
                     },
                     date: {
                         message: '日期格式不正确，输入类似2011-01-01的日期！',
                         format: 'YYYY-MM-DD'
                     },
                     callback: {
                         message: '出生日期与身份证不匹配！',
                         callback: function(value, validator, $field) {
                             var zjlx = $('select[name=U_ZJTYPE]').val();
                             var sfzh = $('input[name=U_ZJNUM]').val();
                             if (zjlx == "身份证" && (sfzh.length == 18 || sfzh.length == 15)) {
                                 var birthdayFromSfzh = "";
                                 if(sfzh.length == 18) {
                                     birthdayFromSfzh = sfzh.substring(6, 14);
                                 } else if(sfzh.length == 15) {
                                     birthdayFromSfzh = "19" + sfzh.substring(6, 12);
                                 }
                                 if(value.replace(/-/g,'') != birthdayFromSfzh)
                                     return false;    // or false
                             }
                             return true;
                         }
                     },
                     callback: {
                         message: '18-60岁之间才能预约！',
                         callback: function(value, validator, $field) {
                             var d = Date.parse(value.replace(/-/g,'/'));
                             var date = new Date();
                             var now = date.format("yyyyMMdd");
                             date.setTime(d);
                             date.addYears(18);
                             var date1 = date.format("yyyyMMdd");  //18岁是哪天
                             date.addYears(42);
                             var date2 = date.format("yyyyMMdd");  //60岁是哪天
                             console.log(date1);
                             console.log(date2);
                             console.log(now);
                             return (now >= date1 && now <= date2);
                         }
                     }
                 }
             },
             "U_BIRTHPLACE": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '户口所在地不能为空！'
                     },
                     regexp: {
                         regexp: /^[\u4e00-\u9fa5]{2,}$/,
                         message: '户口所在地只能输入中文，填写省市区(县)即可，最少两个汉字！'
                     }
                 },
                 onSuccess: function(e, data) {
                     data.bv.revalidateField('U_ZZZNUM');
                 }
             },
             "U_ZJTYPE": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '证件类型不能为空，请选择！'
                     }
                 }
             },
             "U_ZJNUM": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '证件号码不能为空！'
                     },
                     callback: {
                         message: '身份证号码校验失败！',
                         callback: function(value, validator, $field) {
                             var zjlx = $('select[name=U_ZJTYPE]').val();
                             if (zjlx == "身份证")
                                 return IdentityCodeValid(value);
                             else
                                 return true;
                         }
                     },
                     remote: {
                         message: '此证件号码已经预约过，请不要重复预约！',
                         url: 'TzYybk_checkZjhm_1.html',
                         type: 'POST',
 //                        delay: 1000,
                         data: {
                             Y_PC: $('input[name=Y_PC]').val(),
                             PC_ID: $('input[name=PC_ID]').val()
                         }
                     }
                 },
                 onSuccess: function(e, data) {
                     data.bv.revalidateField('U_BIRTHDAY');
                     data.bv.revalidateField('U_SEX');
                 }
             },
             "U_TXPLACE": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '居住地址不能为空！'
                     },
                     regexp: {
                         regexp: /^[a-zA-z0-9\u4e00-\u9fa5,， 　\.\-_]{5,}$/,
                         message: '居住地址只能输入中英文字符、数字以及逗号、点、减号、下划线，且至少五个字符'
                     }

                 }
             },
             "U_ZZZNUM": {
                 validators: {
                      callback: {
                         message: '非北京户口用户必须输入工作居住证号码，且只能输入12位数字，北京户口请在户口所在地中包含“北京”两个字。',
                         callback: function(value, validator, $field) {
                             var hk = $('input[name=U_BIRTHPLACE]').val();
                             if (hk != "" && hk.indexOf("北京") < 0 && value == "") {
                                    return false;    // or false
                             } else {
                                 if(value != "") {
                                     if(/^[0-9]{12}$/m.test(value))
                                         return true;
                                     else
                                         return false;
                                 } else
                                     return true;
                             }
                         }
                     }
                 }
             },
             "U_PHONE": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '手机号不能为空！'
                     },
                     regexp: {
                         regexp: /^[0-9]{11}$/,
                         message: '手机号只能是11位数字！'
                     }
                 }
             },
             "U_EMAIL": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '电子邮箱不能为空！'
                     },
                     regexp: {
                         regexp: /^[a-zA-Z0-9_\-.]+@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/,
                         message: '电子邮箱格式不正确！'
                     }
                 }
             },
             "U_ZJTYPE": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '证件类型不能为空！'
                     }
                 }
             },
             "U_U_NAME": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '联系人姓名不能为空！'
                     },
                     regexp: {
                         regexp: /^[a-zA-z\u4e00-\u9fa5,\.\-_]{2,}$/,
                         message: '只能输入中英文字符以及逗号、点、减号、下划线，且至少两个字符'
                     }
                 }
             },
             "U_U_SEX": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '性别不能为空！'
                     }
                 }
             },
             "U_U_RELATION": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '与联系人的关系不能为空！'
                     },
                     regexp: {
                         regexp: /^[\u4e00-\u9fa5]{2,}$/,
                         message: '与联系人的关系只能输入汉字，最少两个字符！'
                     }
                 }
             },
             "U_U_TELEPHONE": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '联系电话为空！'
                     },
                     regexp: {
                         regexp: /^[0-9()-]{8,}$/,
                         message: '联系电话只能是数字或横杠，最少8位！'
                     }
                 }
             },
             "U_U_TXPLACE": {
                 validators: {
                     notEmpty: {  //非空验证
                         message: '联系人通讯地址不能为空！'
                     },
                     regexp: {
                         regexp: /^[a-zA-z0-9\u4e00-\u9fa5,， 　\.\-_]{5,}$/,
                         message: '联系人通讯地址只能输入中英文字符、数字以及逗号、点、减号、下划线，且至少五个字符'
                     }
                 }
             }
         }
     })
     .on('success.form.bv', function(e) {
         e.preventDefault();
         editPcSave();
     });
 })

提前准备好合格的注册/预约信息是件很重要的事情，通过代码提取然后进行自动的填写。

用一个本地库去保存合格的注册信息。

循环：提取信息，然后提交服务器。

确认提交优化

提前判断信息都通过验证以后（合格），除了用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);

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

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

定义测速机制，根据数据包路由信息确定最优服务器IP地址，直接缓存到本地hosts文件中

3. 智能DNS切换

多服务器情况下，切换选择基于本机的最优服务器

4. CDN返回缓存

CDN判断

结语

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

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